Jelajahi Sumber

fix: Fixed the problem that AutoComplete did not highlight matching items when searching after data update (#2952)

YyumeiZhang 5 bulan lalu
induk
melakukan
534f4e5cc4

+ 4 - 1
packages/semi-foundation/autoComplete/foundation.ts

@@ -221,6 +221,8 @@ class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> e
         const options = this._generateList(newData);
         this._adapter.updateOptionList(options);
         this._adapter.rePositionDropdown();
+        let { inputValue } = this.getStates();
+        this._modifyFocusIndex(inputValue);
     }
 
     handleValueChange(propValue: any) {
@@ -408,7 +410,8 @@ class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> e
             if (focusIndex !== undefined && focusIndex !== -1 && options.length !== 0) {
                 const visibleOptions = options.filter((item: StateOptionItem) => item.show);
                 const selectedOption = visibleOptions[focusIndex];
-                this.handleSelect(selectedOption, focusIndex);
+                selectedOption && this.handleSelect(selectedOption, focusIndex);
+  
             } else {
                 this.closeDropdown();
             }

+ 35 - 0
packages/semi-ui/autoComplete/_story/autoComplete.stories.jsx

@@ -4,6 +4,7 @@ import CustomTrigger from './CustomTrigger';
 import AutoComplete from '../index';
 import { Form, Avatar } from '../../index';
 import { IconSearch } from '@douyinfe/semi-icons';
+import { debounce } from 'lodash';
 
 export default {
     title: 'AutoComplete',
@@ -414,4 +415,38 @@ export const AutoScrollToKeyboardUpDown = () => {
         >
         </AutoComplete>
     </>
+}
+
+export const Fix2951 = () => {
+     let initList = [
+        '1.60','1.62','1.63','1.64'
+    ];
+
+    const [loading, setLoading] = useState(false);
+    const [list, setList] = useState([]);
+
+    const handleSearch = (inputValue) => {
+        setLoading(true);
+        let newList = [];
+        if (inputValue) {
+            newList = initList.filter(item => item.includes(inputValue));
+        }
+        setTimeout(() => {
+            setList(newList);
+            setLoading(false);
+        }, 1000);
+    };
+
+    const search = debounce(handleSearch, 200);
+
+    return (
+        <AutoComplete
+            data={list}
+            style={{ width: 250 }}
+            prefix={<IconSearch />}
+            onSearch={search}
+            loading={loading}
+            defaultActiveFirstOption={true}
+        ></AutoComplete>
+    );
 }