From 835a0086406f286c3dc646367c9fd699e77e5577 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Fri, 7 Apr 2023 17:16:55 +0800
Subject: [PATCH] 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
---
 package.json                             |  2 +-
 src/Selector/SingleSelector.tsx          | 24 ++++++++++------
 tests/Combobox.test.tsx                  |  2 +-
 tests/__snapshots__/Select.test.tsx.snap | 36 ------------------------
 tests/placeholder.test.tsx               |  6 ++--
 5 files changed, 21 insertions(+), 49 deletions(-)

diff --git a/package.json b/package.json
index 205c5083..8aa0ef52 100644
--- 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
index 4b9a7210..b1f867c0 100644
--- 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
index f0fa5eb3..cfb3840d 100644
--- 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
index 818bde0b..15d7f073 100644
--- 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
index 28d3bf6d..840882d2 100644
--- 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', () => {