fix: Select width became 0px when search after select something for antd 5 (#936)

* fix: Select width 0px when searching (#934)

* fix: Select width became 0px when search after select something (#935)

* chore: publish on branch 14.1.x

* 14.1.17-0

* fix: Select width 0px when search again

* fix np branch

Author: afc163

docs/examples/single.tsx

@@ -60,14 +60,13 @@ class Test extends React.Component {
 
         <h2>Single Select</h2>
 
-        <div style={{ width: 300 }}>
+        <div>
           <Select
             autoFocus
             id="my-select"
             value={value}
             placeholder="placeholder"
             showSearch
-            style={{ width: 500 }}
             onBlur={this.onBlur}
             onFocus={this.onFocus}
             onSearch={this.onSearch}

src/Selector/SingleSelector.tsx

@@ -66,9 +66,12 @@ const SingleSelector: React.FC<SelectorProps> = (props) => {
     if (item) {
       return null;
     }
-    const hiddenStyle = hasTextInput ? { visibility: 'hidden' as const } : undefined;
+    const hiddenStyle = hasTextInput ? { visibility: 'hidden' } as React.CSSProperties : undefined;
     return (
-      <span className={`${prefixCls}-selection-placeholder`} style={hiddenStyle}>
+      <span
+        className={`${prefixCls}-selection-placeholder`}
+        style={hiddenStyle}
+      >
         {placeholder}
       </span>
     );
@@ -105,11 +108,18 @@ const SingleSelector: React.FC<SelectorProps> = (props) => {
       </span>
 
       {/* Display value */}
-      {!combobox && item && !hasTextInput && (
-        <span className={`${prefixCls}-selection-item`} title={selectionTitle}>
+      {(!combobox && item) ? (
+        <span
+          className={`${prefixCls}-selection-item`}
+          title={selectionTitle}
+          // 当 Select 已经选中选项时，还需 selection 隐藏但留在原地占位
+          // https://github.com/ant-design/ant-design/issues/27688
+          // https://github.com/ant-design/ant-design/issues/41530
+          style={hasTextInput ? { visibility: 'hidden' } as React.CSSProperties : undefined}
+        >
           {item.label}
         </span>
-      )}
+      ) : null}
 
       {/* Display placeholder */}
       {renderPlaceholder()}

tests/Combobox.test.tsx

@@ -74,7 +74,7 @@ describe('Select.Combobox', () => {
     expect(wrapper.find('input').props().value).toBe('');
     expect(wrapper.find('.rc-select-selection-placeholder').text()).toEqual('placeholder');
     wrapper.find('input').simulate('change', { target: { value: '1' } });
-    expect(wrapper.find('.rc-select-selection-placeholder').length).toBeFalsy();
+    expect(wrapper.find('.rc-select-selection-placeholder').length).toBe(0);
     expect(wrapper.find('input').props().value).toBe('1');
   });
 

tests/Select.test.tsx

@@ -595,18 +595,16 @@ describe('Select.Basic', () => {
       expect(wrapper.find('.rc-select').getDOMNode().className).toContain('-focus');
     });
 
-    it('click placeholder should trigger onFocus', () => {
-      const wrapper2 = mount(
+    it('focus input when placeholder is clicked', () => {
+      const wrapper = mount(
         <Select placeholder="xxxx">
           <Option value="1">1</Option>
           <Option value="2">2</Option>
         </Select>,
       );
-
-      const inputSpy = jest.spyOn(wrapper2.find('input').instance(), 'focus' as any);
-
-      wrapper2.find('.rc-select-selection-placeholder').simulate('mousedown');
-      wrapper2.find('.rc-select-selection-placeholder').simulate('click');
+      const inputSpy = jest.spyOn(wrapper.find('input').instance(), 'focus' as any);
+      wrapper.find('.rc-select-selection-placeholder').simulate('mousedown');
+      wrapper.find('.rc-select-selection-placeholder').simulate('click');
       expect(inputSpy).toHaveBeenCalled();
     });
   });
@@ -816,19 +814,6 @@ describe('Select.Basic', () => {
     expectOpen(wrapper, false);
   });
 
-  it('focus input when placeholder is clicked', () => {
-    const wrapper = mount(
-      <Select placeholder="select">
-        <Option value="1">1</Option>
-      </Select>,
-    );
-
-    const focusSpy = jest.spyOn(wrapper.find('input').instance(), 'focus' as any);
-    wrapper.find('.rc-select-selection-placeholder').simulate('mousedown');
-    wrapper.find('.rc-select-selection-placeholder').simulate('click');
-    expect(focusSpy).toHaveBeenCalled();
-  });
-
   describe('combobox could customize input element', () => {
     it('work', () => {
       const onKeyDown = jest.fn();
@@ -1736,32 +1721,6 @@ 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').getDOMNode().hasAttribute('style'),
-      ).toBe(false);
-      toggleOpen(wrapper);
-      expect(
-        (wrapper.find('.rc-select-selection-placeholder').getDOMNode() as HTMLSpanElement).style
-          .visibility,
-      ).toBe('hidden');
-    });
-
-    it('when value is null', () => {
-      const wrapper = mount(<Select value={null} placeholder="bamboo" />);
-      expect(wrapper.find('.rc-select-selection-placeholder').length).toBeTruthy();
-    });
-
-    it('not when value is null but it is an Option', () => {
-      const wrapper = mount(
-        <Select value={null} placeholder="bamboo" options={[{ value: null, label: 'light' }]} />,
-      );
-      expect(wrapper.find('.rc-select-selection-placeholder').length).toBeFalsy();
-    });
-  });
-
   it('Remove options can keep the cache', () => {
     const wrapper = mount(<Select value={903} options={[{ value: 903, label: 'Bamboo' }]} />);
     expect(findSelection(wrapper).text()).toEqual('Bamboo');
@@ -1894,16 +1853,6 @@ describe('Select.Basic', () => {
     expect(onClick).toHaveBeenCalled();
   });
 
-  it('should hide placeholder if force closed and showSearch with searchValue', () => {
-    const wrapper = mount(
-      <Select showSearch searchValue="search" open={false} placeholder="placeholder" />,
-    );
-    expect(
-      (wrapper.find('.rc-select-selection-placeholder').getDOMNode() as HTMLSpanElement).style
-        .visibility,
-    ).toBe('hidden');
-  });
-
   it('no warning for non-dom attr', () => {
     const wrapper = mount(
       <Select open>

tests/placeholder.test.tsx

@@ -0,0 +1,45 @@
+import { mount } from 'enzyme';
+import React from 'react';
+import Select from '../src';
+import { toggleOpen } from './utils/common';
+
+describe('Select placeholder', () => {
+  it('when searchValue is controlled', () => {
+    const wrapper = mount(<Select searchValue="light" placeholder="bamboo" />);
+    expect(
+      wrapper.find('.rc-select-selection-placeholder').getDOMNode().hasAttribute('style'),
+    ).toBe(false);
+    toggleOpen(wrapper);
+    expect(
+      (wrapper.find('.rc-select-selection-placeholder').getDOMNode() as HTMLSpanElement).style
+        .visibility,
+    ).toBe('hidden');
+  });
+
+  it('when value is null', () => {
+    const wrapper = mount(<Select value={null} placeholder="bamboo" />);
+    expect(wrapper.find('.rc-select-selection-placeholder').length).toBe(1);
+    expect(wrapper.find('.rc-select-selection-placeholder').text()).toBe('bamboo');
+  });
+
+  it('not when value is null but it is an Option', () => {
+    const wrapper = mount(
+      <Select value={null} placeholder="bamboo" options={[{ value: null, label: 'light' }]} />,
+    );
+    expect(wrapper.find('.rc-select-selection-placeholder').length).toBe(0);
+    expect(wrapper.find('.rc-select-selection-item').text()).toBe('light');
+    toggleOpen(wrapper);
+    expect(wrapper.find('.rc-select-selection-item').text()).toBe('light');
+  });
+
+  it('should hide placeholder if force closed and showSearch with searchValue', () => {
+    const wrapper = mount(
+      <Select showSearch searchValue="search" open={false} placeholder="placeholder" />,
+    );
+    expect(
+      (wrapper.find('.rc-select-selection-placeholder').getDOMNode() as HTMLSpanElement).style
+        .visibility,
+    ).toBe('hidden');
+    expect(wrapper.find('.rc-select-selection-placeholder').text()).toBe('placeholder');
+  });
+});