fix autocomplete sets previous value using onInputChange

marmelab · Sep 5, 2023 · ee76753 · ee76753
1 parent 183dfa2
commit ee76753
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 28 deletions.
diff --git a/docs/AutocompleteInput.md b/docs/AutocompleteInput.md
@@ -583,7 +583,7 @@ const CompanyInput = () => {
             choices={choicesWithCurrentCompany}
             optionText="name"
             disabled={isLoading}
-            onInputChange={e => setFilter({ q: e.target.value })}
+            onInputChange={(_, newInputValue) => setFilter({ q: newInputValue })}
         />
     );
 }

diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx
@@ -1108,3 +1108,27 @@ export const TranslateChoice = () => {
         </AdminContext>
     );
 };
+
+export const WithInputOnChange = () => {
+    const [searchText, setSearchText] = React.useState('');
+
+    return (
+        <AdminContext dataProvider={dataProviderWithAuthors}>
+            <div>Search text: {searchText}</div>
+            <SimpleForm onSubmit={() => {}} defaultValues={{ role: 2 }}>
+                <AutocompleteInput
+                    fullWidth
+                    source="role"
+                    resource="users"
+                    choices={[
+                        { id: 1, name: 'bar' },
+                        { id: 2, name: 'foo' },
+                    ]}
+                    onInputChange={(_, value: string) => {
+                        setSearchText(value);
+                    }}
+                />
+            </SimpleForm>
+        </AdminContext>
+    );
+};
diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx
@@ -111,6 +111,13 @@ const defaultFilterOptions = createFilterOptions();
  *
  * @example
  * <AutocompleteInput source="author_id" options={{ color: 'secondary', InputLabelProps: { shrink: true } }} />
+ *
+ * Retrieve the value displayed in the textbox using the `onInputChange` prop:
+ *
+ * @example
+ * const [state, setState] = useState('')
+ *
+ * <AutocompleteInput source="gender" choices={choices} onInputChange={(_, newInputValue) => setState(newInputValue)} />
  */
 export const AutocompleteInput = <
     OptionType extends RaRecord = RaRecord,
@@ -440,33 +447,14 @@ If you provided a React element for the optionText prop, you must also provide t
     useEffect(() => {
         if (!multiple) {
             const optionLabel = getOptionLabel(selectedChoice);
-            if (typeof optionLabel === 'string') {
-                setFilterValue(optionLabel);
-            } else {
+            if (typeof optionLabel !== 'string') {
                 throw new Error(
                     'When optionText returns a React element, you must also provide the inputText prop'
                 );
             }
         }
     }, [getOptionLabel, multiple, selectedChoice]);
 
-    const handleInputChange: AutocompleteProps<
-        OptionType,
-        Multiple,
-        DisableClearable,
-        SupportCreate
-    >['onInputChange'] = (event, newInputValue, reason) => {
-        if (
-            event?.type === 'change' ||
-            !doesQueryMatchSelection(newInputValue)
-        ) {
-            setFilterValue(newInputValue);
-            debouncedSetFilter(newInputValue);
-        }
-
-        onInputChange?.(event, newInputValue, reason);
-    };
-
     const doesQueryMatchSelection = useCallback(
         (filter: string) => {
             let selectedItemTexts;
@@ -515,13 +503,42 @@ If you provided a React element for the optionText prop, you must also provide t
         return filteredOptions;
     };
 
-    const handleAutocompleteChange = (
-        event: any,
-        newValue: any,
-        _reason: string
-    ) => {
-        handleChangeWithCreateSupport(newValue != null ? newValue : emptyValue);
-    };
+    const handleAutocompleteChange = useCallback<
+        AutocompleteProps<
+            OptionType,
+            Multiple,
+            DisableClearable,
+            SupportCreate
+        >['onChange']
+    >(
+        (_event, newValue, _reason) => {
+            handleChangeWithCreateSupport(
+                newValue != null ? newValue : emptyValue
+            );
+        },
+        [emptyValue, handleChangeWithCreateSupport]
+    );
+
+    const handleInputChange = useCallback<
+        AutocompleteProps<
+            OptionType,
+            Multiple,
+            DisableClearable,
+            SupportCreate
+        >['onInputChange']
+    >(
+        (event, newInputValue, reason) => {
+            if (
+                typeof event?.type === 'string' ||
+                !doesQueryMatchSelection(newInputValue)
+            ) {
+                debouncedSetFilter(newInputValue);
+            }
+            setFilterValue(newInputValue);
+            onInputChange?.(event, newInputValue, reason);
+        },
+        [debouncedSetFilter, doesQueryMatchSelection, onInputChange]
+    );
 
     const oneSecondHasPassed = useTimeout(1000, filterValue);