fix(auto-complete): the display effect is abnormal when the option is…

… empty
Tencent · Jan 7, 2025 · e7279a3 · e7279a3
1 parent 7d321e9
commit e7279a3
Showing 1 changed file with 6 additions and 5 deletions.
diff --git a/src/auto-complete/OptionList.tsx b/src/auto-complete/OptionList.tsx
@@ -8,6 +8,7 @@ import { CommonClassNameType } from '../hooks/useCommonClassName';
 import { AutoCompleteOptionObj, TdAutoCompleteProps } from './type';
 import HighlightOption from './HighlightOption';
 import { on, off } from '../_util/dom';
+import Empty from '../empty';
 
 export interface OptionsListProps {
   sizeClassNames: CommonClassNameType['sizeClassNames'];
@@ -18,7 +19,7 @@ export interface OptionsListProps {
   highlightKeyword: boolean;
   filterable: boolean;
   filter: TdAutoCompleteProps['filter'];
-  onSelect?: (keyword: string, context: { e: MouseEvent<HTMLLIElement> | KeyboardEvent | any }) => void;
+  onSelect: (keyword: string, context: { e: MouseEvent<HTMLLIElement> | KeyboardEvent | any }) => void;
 }
 
 export interface OptionsListRef {
@@ -81,7 +82,7 @@ const OptionsList = forwardRef<OptionsListRef, OptionsListProps>((props: Options
     }
     const keyword = liNode.getAttribute('title');
     setActive(keyword);
-    onSelect?.(keyword, { e });
+    onSelect(keyword, { e });
   };
 
   // 键盘事件，上下选择
@@ -90,10 +91,10 @@ const OptionsList = forwardRef<OptionsListRef, OptionsListProps>((props: Options
       const currentIndex = activeIndexRef.current;
 
       if (currentIndex === -1) {
-        return
+        return;
       }
 
-      onSelect?.(tOptions[activeIndexRef.current].text, { e });
+      onSelect(tOptions[activeIndexRef.current].text, { e });
     } else {
       const index = activeIndexRef.current;
       let newIndex;
@@ -141,7 +142,7 @@ const OptionsList = forwardRef<OptionsListRef, OptionsListProps>((props: Options
     activeIndexRef.current = tOptions.findIndex((item) => item.text === active);
   }, [active, tOptions]);
 
-  if (!tOptions.length) return null;
+  if (!tOptions.length) return <Empty />;
   return (
     <ul className={classes}>
       {tOptions.map((item) => {