refactor: placeholder move into the content (#1167)

Author: zombieJ

assets/patch.less

@@ -75,6 +75,13 @@
       margin-right: 4px;
     }
 
+    .@{select-prefix}-placeholder {
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
     .@{select-prefix}-input {
       width: calc(var(--select-input-width, 10) * 1px);
       min-width: 4px;

jest.config.js

@@ -1,5 +1,4 @@
 module.exports = {
   setupFilesAfterEnv: ['<rootDir>/tests/setup.ts'],
-  collectCoverage: true,
   collectCoverageFrom: ['src/**/*.{ts,tsx,js,jsx}'],
 };

package.json

@@ -53,7 +53,7 @@
     "@rc-component/trigger": "^3.0.0",
     "@rc-component/util": "^1.3.0",
     "clsx": "^2.1.1",
-    "rc-overflow": "^1.4.0",
+    "rc-overflow": "^1.5.0",
     "rc-virtual-list": "^3.5.2"
   },
   "devDependencies": {

src/SelectInput/Content/MultipleContent.tsx

@@ -183,27 +183,24 @@ export default React.forwardRef<HTMLInputElement, SharedContentProps>(function M
 
   // ======================= Render =======================
   return (
-    <>
-      <Placeholder show={!searchValue || !triggerOpen} />
-      <Overflow
-        prefixCls={`${prefixCls}-content`}
-        data={displayValues}
-        renderItem={renderItem}
-        renderRest={renderRest}
-        // suffix={inputNode}
-        suffix={
-          <Input
-            ref={ref}
-            disabled={disabled}
-            readOnly={!inputEditable}
-            {...inputProps}
-            value={inputValue || ''}
-            syncWidth
-          />
-        }
-        itemKey={itemKey}
-        maxCount={maxTagCount}
-      />
-    </>
+    <Overflow
+      prefixCls={`${prefixCls}-content`}
+      prefix={!displayValues.length && (!searchValue || !triggerOpen) ? <Placeholder /> : null}
+      data={displayValues}
+      renderItem={renderItem}
+      renderRest={renderRest}
+      suffix={
+        <Input
+          ref={ref}
+          disabled={disabled}
+          readOnly={!inputEditable}
+          {...inputProps}
+          value={inputValue || ''}
+          syncWidth
+        />
+      }
+      itemKey={itemKey}
+      maxCount={maxTagCount}
+    />
   );
 });

src/SelectInput/Content/Placeholder.tsx

@@ -2,12 +2,12 @@ import * as React from 'react';
 import { useSelectInputContext } from '../context';
 
 export interface PlaceholderProps {
-  show: boolean;
+  show?: boolean;
 }
 
 export default function Placeholder(props: PlaceholderProps) {
   const { prefixCls, placeholder, displayValues } = useSelectInputContext();
-  const { show } = props;
+  const { show = true } = props;
 
   if (displayValues.length) {
     return null;

tests/Multiple.test.tsx

@@ -438,9 +438,7 @@ describe('Select.Multiple', () => {
       visibility: 'visible',
     });
     toggleOpen(container);
-    expect(container.querySelector('.rc-select-placeholder')).toHaveStyle({
-      visibility: 'hidden',
-    });
+    expect(container.querySelector('.rc-select-placeholder')).toBeFalsy();
   });
 
   it('clear input when popup closed', () => {