chore: of it

Author: zombieJ

docs/examples/multiple.tsx

@@ -99,7 +99,7 @@ class Test extends React.Component {
             style={{ width: 500 }}
             mode="multiple"
             loading={loading}
-            suffixIcon={suffixIcon}
+            suffix={suffixIcon}
             allowClear
             optionFilterProp="children"
             optionLabelProp="children"

src/BaseSelect/index.tsx

@@ -439,7 +439,6 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
   );
 
   const onInternalSearch = (searchText: string, fromTyping: boolean, isCompositing: boolean) => {
-    console.log('is', searchText);
     if (multiple && isValidCount(maxCount) && displayValues.length >= maxCount) {
       return;
     }

src/Select.tsx

@@ -611,7 +611,6 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
     const onInternalSearch: BaseSelectProps['onSearch'] = (searchText, info) => {
       setSearchValue(searchText);
       setActiveValue(null);
-      console.log('???', searchText);
 
       // [Submit] Tag mode should flush input
       if (info.source === 'submit') {

src/SelectInput/Content/MultipleContent.tsx

@@ -11,6 +11,7 @@ import TransBtn from '../../TransBtn';
 import { getTitle } from '../../utils/commonUtil';
 import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
 import useBaseProps from '../../hooks/useBaseProps';
+import Placeholder from './Placeholder';
 
 function itemKey(value: DisplayValueType) {
   return value.key ?? value.value;
@@ -178,24 +179,27 @@ export default React.forwardRef<HTMLInputElement, SharedContentProps>(function M
 
   // ======================= Render =======================
   return (
-    <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}
-    />
+    <>
+      <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}
+      />
+    </>
   );
 });

src/SelectInput/Content/Placeholder.tsx

@@ -2,15 +2,12 @@ import * as React from 'react';
 import { useSelectInputContext } from '../context';
 
 export interface PlaceholderProps {
-  hasSearchValue?: boolean;
+  show: boolean;
 }
 
 export default function Placeholder(props: PlaceholderProps) {
   const { prefixCls, placeholder, displayValues } = useSelectInputContext();
-
-  const { searchValue } = useSelectInputContext();
-
-  const { hasSearchValue = !!searchValue } = props;
+  const { show } = props;
 
   if (displayValues.length) {
     return null;
@@ -20,7 +17,7 @@ export default function Placeholder(props: PlaceholderProps) {
     <div
       className={`${prefixCls}-placeholder`}
       style={{
-        visibility: hasSearchValue ? 'hidden' : 'visible',
+        visibility: show ? 'visible' : 'hidden',
       }}
     >
       {placeholder}

src/SelectInput/Content/SingleContent.tsx

@@ -75,7 +75,7 @@ const SingleContent = React.forwardRef<HTMLInputElement, SharedContentProps>(
         {displayValue ? (
           <div {...optionProps}>{displayValue.label}</div>
         ) : (
-          <Placeholder hasSearchValue={!!mergedSearchValue} />
+          <Placeholder show={!mergedSearchValue} />
         )}
         <Input
           ref={ref}

tests/Multiple.test.tsx

@@ -33,6 +33,14 @@ describe('Select.Multiple', () => {
   dynamicChildrenTest('multiple');
   inputFilterTest('multiple');
 
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
   it('tokenize input', () => {
     const handleChange = jest.fn();
     const handleSelect = jest.fn();
@@ -426,9 +434,13 @@ describe('Select.Multiple', () => {
     const { container } = render(
       <Select mode="multiple" searchValue="light" placeholder="bamboo" />,
     );
-    expect(container.querySelector('.rc-select-placeholder')).toBeTruthy();
+    expect(container.querySelector('.rc-select-placeholder')).toHaveStyle({
+      visibility: 'visible',
+    });
     toggleOpen(container);
-    expect(container.querySelector('.rc-select-placeholder')).toBeFalsy();
+    expect(container.querySelector('.rc-select-placeholder')).toHaveStyle({
+      visibility: 'hidden',
+    });
   });
 
   it('clear input when popup closed', () => {
@@ -437,12 +449,13 @@ describe('Select.Multiple', () => {
     );
     toggleOpen(container);
     fireEvent.change(container.querySelector('input'), { target: { value: 'bamboo' } });
-    expect(container.querySelector('input').value).toEqual('bamboo');
+    expect(container.querySelector('input')).toHaveValue('bamboo');
 
     // Close and open again
     toggleOpen(container);
+    fireEvent.blur(container.querySelector('input'));
     toggleOpen(container);
-    expect(container.querySelector('input').value).toEqual('');
+    expect(container.querySelector('input')).toHaveValue('');
   });
 
   it('ajax update should keep options', () => {