From c0c583031288c17b14270ce14e1139425c60feca Mon Sep 17 00:00:00 2001 From: Thomas Daniellou Date: Fri, 1 Sep 2023 16:51:53 +0200 Subject: [PATCH 1/2] fix AutocompleteInput onInputChange is never called --- .../src/input/AutocompleteInput.spec.tsx | 20 +++++++++++++++++++ .../src/input/AutocompleteInput.tsx | 5 ++++- 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx index 872843fcf1a..d30053c8ede 100644 --- a/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx +++ b/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx @@ -1532,4 +1532,24 @@ describe('', () => { await checkInputValue('prefers_zero-number', '0'); await checkInputValue('prefers_valid-value', '1'); }); + + it('should call the onInputChange callback', async () => { + const onInputChange = jest.fn(); + + render( + + + + + + ); + const input = screen.getByLabelText( + 'resources.users.fields.role' + ) as HTMLInputElement; + fireEvent.change(input, { target: { value: 'newValue' } }); + await waitFor(() => expect(onInputChange).toHaveBeenCalled()); + }); }); diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx index ecd7b58e6a8..472069ff380 100644 --- a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx +++ b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx @@ -173,6 +173,7 @@ export const AutocompleteInput = < translateChoice, validate, variant, + onInputChange, ...rest } = props; @@ -450,7 +451,7 @@ If you provided a React element for the optionText prop, you must also provide t }, [getOptionLabel, multiple, selectedChoice]); const handleInputChange = ( - event: any, + event: React.SyntheticEvent, newInputValue: string, _reason: string ) => { @@ -461,6 +462,8 @@ If you provided a React element for the optionText prop, you must also provide t setFilterValue(newInputValue); debouncedSetFilter(newInputValue); } + + onInputChange?.(event); }; const doesQueryMatchSelection = useCallback( From c4de05c03af1d417990bd40f8c7a98e3569f8580 Mon Sep 17 00:00:00 2001 From: Thomas Daniellou Date: Fri, 1 Sep 2023 17:03:25 +0200 Subject: [PATCH 2/2] fix types --- .../src/input/AutocompleteInput.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx index 472069ff380..9b049ed6e01 100644 --- a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx +++ b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx @@ -450,11 +450,12 @@ If you provided a React element for the optionText prop, you must also provide t } }, [getOptionLabel, multiple, selectedChoice]); - const handleInputChange = ( - event: React.SyntheticEvent, - newInputValue: string, - _reason: string - ) => { + const handleInputChange: AutocompleteProps< + OptionType, + Multiple, + DisableClearable, + SupportCreate + >['onInputChange'] = (event, newInputValue, reason) => { if ( event?.type === 'change' || !doesQueryMatchSelection(newInputValue) @@ -463,7 +464,7 @@ If you provided a React element for the optionText prop, you must also provide t debouncedSetFilter(newInputValue); } - onInputChange?.(event); + onInputChange?.(event, newInputValue, reason); }; const doesQueryMatchSelection = useCallback(