fix: select placeholder position (#677)

* use import export type syntax

* fix: select placeholder should take place when searching

ant-design/ant-design#27688

* fix test case

Author: afc163

src/Selector/SingleSelector.tsx

@@ -63,6 +63,18 @@ const SingleSelector: React.FC<SelectorProps> = (props) => {
       ? item.label.toString()
       : undefined;
 
+  const renderPlaceholder = () => {
+    if (item) {
+      return null;
+    }
+    const hiddenStyle = hasTextInput ? { visibility: 'hidden' as const } : undefined;
+    return (
+      <span className={`${prefixCls}-selection-placeholder`} style={hiddenStyle}>
+        {placeholder}
+      </span>
+    );
+  };
+
   return (
     <>
       <span className={`${prefixCls}-selection-search`}>
@@ -101,9 +113,7 @@ const SingleSelector: React.FC<SelectorProps> = (props) => {
       )}
 
       {/* Display placeholder */}
-      {!item && !hasTextInput && (
-        <span className={`${prefixCls}-selection-placeholder`}>{placeholder}</span>
-      )}
+      {renderPlaceholder()}
     </>
   );
 };

src/index.ts

@@ -1,8 +1,10 @@
-import Select, { ExportedSelectProps as SelectProps } from './Select';
-import { RefSelectProps } from './generate';
+import Select from './Select';
 import Option from './Option';
 import OptGroup from './OptGroup';
+import type { ExportedSelectProps as SelectProps } from './Select';
+import type { RefSelectProps } from './generate';
 
-export { Option, OptGroup, SelectProps, RefSelectProps };
+export { Option, OptGroup };
+export type { SelectProps, RefSelectProps };
 
 export default Select;

tests/Select.test.tsx

@@ -1615,9 +1615,14 @@ describe('Select.Basic', () => {
   describe('show placeholder', () => {
     it('when searchValue is controlled', () => {
       const wrapper = mount(<Select searchValue="light" placeholder="bamboo" />);
-      expect(wrapper.find('.rc-select-selection-placeholder').length).toBeTruthy();
+      expect(
+        wrapper.find('.rc-select-selection-placeholder').getDOMNode().hasAttribute('style'),
+      ).toBe(false);
       toggleOpen(wrapper);
-      expect(wrapper.find('.rc-select-selection-placeholder').length).toBeFalsy();
+      expect(
+        (wrapper.find('.rc-select-selection-placeholder').getDOMNode() as HTMLSpanElement).style
+          .visibility,
+      ).toBe('hidden');
     });
 
     it('when value is null', () => {

tests/__snapshots__/Select.test.tsx.snap

@@ -27,6 +27,10 @@ exports[`Select.Basic does not filter when filterOption value is false 1`] = `
         value=""
       />
     </span>
+    <span
+      class="rc-select-selection-placeholder"
+      style="visibility:hidden"
+    />
   </div>
   <div>
     <div
@@ -156,6 +160,10 @@ exports[`Select.Basic filterOption could be true as described in default value 1
         value="3"
       />
     </span>
+    <span
+      class="rc-select-selection-placeholder"
+      style="visibility: hidden;"
+    />
   </div>
   <div>
     <div