Merge pull request #244 from anubra266/feature/fixValueProp

Fix `value` prop does nothing
anubra266 · Feb 10, 2024 · 7941c9a · 7941c9a
2 parents fe3693d + 38ceebf
commit 7941c9a
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git a/src/autocomplete-input.tsx b/src/autocomplete-input.tsx
@@ -47,7 +47,9 @@ export const AutoCompleteInput = forwardRef<AutoCompleteInputProps, "input">(
       inputRef,
       getInputProps,
       tags,
-      setQuery
+      setQuery, 
+      value, 
+      itemList
     } = useAutoCompleteContext();
 
     // const ref = useMergeRefs(forwardedRef, inputRef);
@@ -59,14 +61,24 @@ export const AutoCompleteInput = forwardRef<AutoCompleteInputProps, "input">(
       ...rest
     } = props;
 
-    const { value } = rest;
+    const { value: inputValue } = rest;
 
     useEffect(() => {
       if(value !== undefined && (typeof value === 'string' || value instanceof String)) {
-        setQuery(value);
+        const item = itemList.find(l => l.value === value);
+
+        const newQuery = item === undefined ? value : item.label;
+
+        setQuery(newQuery);
       }
     }, [value]);
 
+    useEffect(() => {
+      if(inputValue !== undefined && (typeof inputValue === 'string' || inputValue instanceof String)) {
+        setQuery(inputValue);
+      }
+    }, [inputValue]);
+
     const themeInput: any = useMultiStyleConfig("Input", props);
 
     let { wrapper, input: inputProps } = getInputProps(rest, themeInput);

diff --git a/src/types.ts b/src/types.ts
@@ -149,6 +149,7 @@ export type UseAutoCompleteReturn = {
   resetItems: (focusInput?: boolean) => void;
   setQuery: Dispatch<SetStateAction<any>>;
   tags: ItemTag[];
+  value: Item["value"];
   values: Item["value"][];
 };
 

diff --git a/src/use-autocomplete.ts b/src/use-autocomplete.ts
@@ -487,6 +487,7 @@ export function useAutoComplete(
     resetItems,
     setQuery,
     tags,
+    value, 
     values,
   };
 }