fix(ui): select

NJUPT-SAST · Feb 7, 2024 · b04cb9c · b04cb9c
1 parent f10e154
commit b04cb9c
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/packages/ui/lib/Input/Input.tsx b/packages/ui/lib/Input/Input.tsx
@@ -57,14 +57,14 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       onchange,
       isFillFather = false,
       value,
-      defaultValue,
+      defaultValue = '',
       ...rest
     },
     ref,
   ) => {
     //设置isUpLabel来调节Label上浮状态
     const [isUpInputLabel, setIsUpInputLabel] = useState<boolean>(false);
-    const [inputValue, setInputValue] = useState<string | undefined>(defaultValue);
+    const [inputValue, setInputValue] = useState<string>(defaultValue);
     const InputClass = classnames(
       styles['base'],
       styles[disabled ? 'disabled' : ''],

diff --git a/packages/ui/lib/Select/Select.tsx b/packages/ui/lib/Select/Select.tsx
@@ -56,6 +56,7 @@ export const Select = React.forwardRef<HTMLDivElement, SelectProps>(
       optionsList.find((item) => item.key === defaultSelectKey),
     );
     const [options, setOptions] = useState<OptionProps[]>(optionsList);
+    const [inputValue, setInputValue] = useState<string>('');
 
     const showOptions: MouseEventHandler = () => {
       if (!disabled) setVisble(!visible);
@@ -67,15 +68,19 @@ export const Select = React.forwardRef<HTMLDivElement, SelectProps>(
 
     function handleClick(value: OptionProps): void {
       setSelectItem(value);
-      onchange(value);
+      setInputValue(value.label);
     }
 
+    useEffect(() => {
+      selectItem && onchange(selectItem);
+      selectItem?.value && setInputValue(selectItem?.value);
+    }, [selectItem, onchange]);
+
     const handleOptions = (value: string) => {
       if (value === '') {
         setSelectItem(undefined);
       }
-      const results = fuzzySearch(optionsList, value);
-      setOptions(results);
+      setInputValue(value);
     };
 
     function fuzzySearch(optionsList: OptionProps[], searchTerm: string): OptionProps[] {
@@ -89,6 +94,10 @@ export const Select = React.forwardRef<HTMLDivElement, SelectProps>(
       }, 100);
     };
 
+    useEffect(() => {
+      const results = fuzzySearch(optionsList, inputValue);
+      setOptions(results);
+    }, [inputValue, optionsList]);
     return (
       <>
         <div
@@ -97,7 +106,7 @@ export const Select = React.forwardRef<HTMLDivElement, SelectProps>(
         >
           <Input
             onClick={showOptions}
-            value={selectItem?.value}
+            value={inputValue}
             onBlur={closeOptions}
             width={280}
             onchange={handleOptions}