From b04cb9cde72768f73b17c2b8a095607bd8f460e6 Mon Sep 17 00:00:00 2001
From: BQX <b22050106@njupt.edu.cn>
Date: Wed, 7 Feb 2024 23:38:39 +0800
Subject: [PATCH] fix(ui): select

---
 packages/ui/lib/Input/Input.tsx   |  4 ++--
 packages/ui/lib/Select/Select.tsx | 17 +++++++++++++----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/ui/lib/Input/Input.tsx b/packages/ui/lib/Input/Input.tsx
index ee0ab92..ba8045d 100644
--- 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
index b472479..8885c86 100644
--- 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}