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
react-component · Apr 10, 2023 · 835a008 · 835a008
1 parent baf7ac4
commit 835a008
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 49 deletions.
diff --git a/package.json b/package.json
@@ -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",

diff --git a/src/Selector/SingleSelector.tsx b/src/Selector/SingleSelector.tsx
@@ -62,18 +62,17 @@ const SingleSelector: React.FC<SelectorProps> = (props) => {
   // Get title of selection item
   const selectionTitle = title === undefined ? getTitle(item) : title;
 
-  // 当 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>
     );
   };
@@ -109,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()}

diff --git a/tests/Combobox.test.tsx b/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');
   });
 

diff --git a/tests/__snapshots__/Select.test.tsx.snap b/tests/__snapshots__/Select.test.tsx.snap
@@ -141,12 +141,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"
@@ -195,12 +189,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"
@@ -257,12 +245,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"
@@ -321,12 +303,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"
@@ -384,12 +360,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"
@@ -437,12 +407,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"

diff --git a/tests/placeholder.test.tsx b/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', () => {