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

Author: afc163

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-select",
-  "version": "14.1.16",
+  "version": "14.1.17-0",
   "description": "React Select",
   "engines": {
     "node": ">=8.x"
@@ -33,7 +33,7 @@
     "start": "dumi dev",
     "build": "dumi build",
     "compile": "father build",
-    "prepublishOnly": "npm run compile && np --yolo --no-publish",
+    "prepublishOnly": "npm run compile && np --yolo --no-publish --branch 14.1.x",
     "lint": "eslint src/ docs/examples/ --ext .tsx,.ts,.jsx,.js",
     "test": "rc-test",
     "tsc": "tsc --noEmit",

src/Selector/SingleSelector.tsx

@@ -61,18 +61,17 @@ const SingleSelector: React.FC<SelectorProps> = (props) => {
   // Get title
   const title = getTitle(item);
 
-  // 当 Select 已经选中了选型时，placeholder 隐藏，但留在原地占位，内容是选中项文本，这样宽度不会缩减为 0px
-  // https://github.com/ant-design/ant-design/issues/27688
-  // https://github.com/ant-design/ant-design/issues/41530
   const renderPlaceholder = () => {
-    const hiddenStyle = (hasTextInput || item)
-      ? { visibility: 'hidden' } as React.CSSProperties : undefined;
+    if (item) {
+      return null;
+    }
+    const hiddenStyle = hasTextInput ? { visibility: 'hidden' } as React.CSSProperties : undefined;
     return (
       <span
         className={`${prefixCls}-selection-placeholder`}
         style={hiddenStyle}
       >
-        {item ? item.label : placeholder}
+        {placeholder}
       </span>
     );
   };
@@ -108,11 +107,18 @@ const SingleSelector: React.FC<SelectorProps> = (props) => {
       </span>
 
       {/* Display value */}
-      {!combobox && item && !hasTextInput && (
-        <span className={`${prefixCls}-selection-item`} title={title}>
+      {(!combobox && item) ? (
+        <span
+          className={`${prefixCls}-selection-item`}
+          title={title}
+          // 当 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).toBe(1);
+    expect(wrapper.find('.rc-select-selection-placeholder').length).toBe(0);
     expect(wrapper.find('input').props().value).toBe('1');
   });
 

tests/__snapshots__/Select.test.tsx.snap

@@ -226,12 +226,6 @@ exports[`Select.Basic no search 1`] = `
     >
       1
     </span>
-    <span
-      class="rc-select-selection-placeholder"
-      style="visibility:hidden"
-    >
-      1
-    </span>
   </div>
   <span
     aria-hidden="true"
@@ -279,12 +273,6 @@ exports[`Select.Basic render renders aria-attributes correctly 1`] = `
     >
       2
     </span>
-    <span
-      class="antd-selection-placeholder"
-      style="visibility:hidden"
-    >
-      2
-    </span>
   </div>
   <span
     aria-hidden="true"
@@ -340,12 +328,6 @@ exports[`Select.Basic render renders correctly 1`] = `
     >
       2
     </span>
-    <span
-      class="antd-selection-placeholder"
-      style="visibility:hidden"
-    >
-      2
-    </span>
   </div>
   <span
     aria-hidden="true"
@@ -403,12 +385,6 @@ exports[`Select.Basic render renders data-attributes correctly 1`] = `
     >
       2
     </span>
-    <span
-      class="antd-selection-placeholder"
-      style="visibility:hidden"
-    >
-      2
-    </span>
   </div>
   <span
     aria-hidden="true"
@@ -466,12 +442,6 @@ exports[`Select.Basic render renders disabled select correctly 1`] = `
     >
       2
     </span>
-    <span
-      class="antd-selection-placeholder"
-      style="visibility:hidden"
-    >
-      2
-    </span>
   </div>
   <span
     aria-hidden="true"
@@ -516,12 +486,6 @@ exports[`Select.Basic render renders dropdown correctly 1`] = `
     >
       2
     </span>
-    <span
-      class="antd-selection-placeholder"
-      style="visibility:hidden"
-    >
-      2
-    </span>
   </div>
   <div>
     <div
@@ -708,12 +672,6 @@ exports[`Select.Basic render renders role prop correctly 1`] = `
     >
       2
     </span>
-    <span
-      class="antd-selection-placeholder"
-      style="visibility:hidden"
-    >
-      2
-    </span>
   </div>
   <span
     aria-hidden="true"
@@ -773,12 +731,6 @@ exports[`Select.Basic should contain falsy children 1`] = `
     >
       1
     </span>
-    <span
-      class="rc-select-selection-placeholder"
-      style="visibility:hidden"
-    >
-      1
-    </span>
   </div>
   <div>
     <div

tests/placeholder.test.tsx

@@ -26,8 +26,10 @@ describe('Select placeholder', () => {
     const wrapper = mount(
       <Select value={null} placeholder="bamboo" options={[{ value: null, label: 'light' }]} />,
     );
-    expect(wrapper.find('.rc-select-selection-placeholder').length).toBe(1);
-    expect(wrapper.find('.rc-select-selection-placeholder').text()).toBe('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', () => {