From 2443553d030501ff3894bbe3c2a8bdd10c49709a Mon Sep 17 00:00:00 2001 From: Jan Biardzki <37340314+yanchesky@users.noreply.github.com> Date: Mon, 18 Mar 2024 11:45:51 +0100 Subject: [PATCH 1/5] Fixed `useInput`'s return type --- packages/ra-core/src/form/useInput.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/ra-core/src/form/useInput.ts b/packages/ra-core/src/form/useInput.ts index 85decdc4108..d2424c2127e 100644 --- a/packages/ra-core/src/form/useInput.ts +++ b/packages/ra-core/src/form/useInput.ts @@ -153,7 +153,9 @@ export type InputProps = Omit< export type UseInputValue = { id: string; isRequired: boolean; - field: ControllerRenderProps; + field: Omit & { + onBlur: (...event: any[]) => void; + }; formState: UseFormStateReturn>; fieldState: ControllerFieldState; }; From a5d0d1454275535522a9d60d447d5d43106ead6c Mon Sep 17 00:00:00 2001 From: Jan Biardzki <37340314+yanchesky@users.noreply.github.com> Date: Mon, 18 Mar 2024 11:54:06 +0100 Subject: [PATCH 2/5] Added event object to onBlur function parameter to the `NumberInput` --- packages/ra-ui-materialui/src/input/NumberInput.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ra-ui-materialui/src/input/NumberInput.tsx b/packages/ra-ui-materialui/src/input/NumberInput.tsx index 5d471362354..dc0e8d64755 100644 --- a/packages/ra-ui-materialui/src/input/NumberInput.tsx +++ b/packages/ra-ui-materialui/src/input/NumberInput.tsx @@ -109,9 +109,9 @@ export const NumberInput = ({ hasFocus.current = true; }; - const handleBlur = () => { + const handleBlur = (event: React.FocusEvent) => { if (onBlurFromField) { - onBlurFromField(); + onBlurFromField(event); } hasFocus.current = false; const stringValue = format(field.value); From df9ab51743f9842da6caa03e43ac38d9fae1f8d0 Mon Sep 17 00:00:00 2001 From: Jan Biardzki <37340314+yanchesky@users.noreply.github.com> Date: Mon, 18 Mar 2024 11:59:55 +0100 Subject: [PATCH 3/5] Added event object to onBlur function parameter to the `AutocompleteInput` --- .../src/input/AutocompleteInput.tsx | 37 ++++++++++--------- 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx index de43eb1f532..0748297b03a 100644 --- a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx +++ b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx @@ -418,24 +418,27 @@ If you provided a React element for the optionText prop, you must also provide t ] ); - const finalOnBlur = useCallback((): void => { - if (clearOnBlur && !multiple) { - const optionLabel = getOptionLabel(selectedChoice); - if (!isEqual(optionLabel, filterValue)) { - setFilterValue(optionLabel); - debouncedSetFilter(''); + const finalOnBlur = useCallback( + (event): void => { + if (clearOnBlur && !multiple) { + const optionLabel = getOptionLabel(selectedChoice); + if (!isEqual(optionLabel, filterValue)) { + setFilterValue(optionLabel); + debouncedSetFilter(''); + } } - } - field.onBlur(); - }, [ - clearOnBlur, - field, - getOptionLabel, - selectedChoice, - filterValue, - debouncedSetFilter, - multiple, - ]); + field.onBlur(event); + }, + [ + clearOnBlur, + field, + getOptionLabel, + selectedChoice, + filterValue, + debouncedSetFilter, + multiple, + ] + ); useEffect(() => { if (!multiple) { From 08b241b23341450cb49b47dfb0bbdc795aff87b8 Mon Sep 17 00:00:00 2001 From: Jan Biardzki <37340314+yanchesky@users.noreply.github.com> Date: Mon, 18 Mar 2024 12:42:25 +0100 Subject: [PATCH 4/5] Fixed `NumberInput`'s test to verify that the event object is properly passed to the onBlur handler --- packages/ra-ui-materialui/src/input/NumberInput.spec.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/ra-ui-materialui/src/input/NumberInput.spec.tsx b/packages/ra-ui-materialui/src/input/NumberInput.spec.tsx index 986f2da5e3e..7f7e5c5ebb3 100644 --- a/packages/ra-ui-materialui/src/input/NumberInput.spec.tsx +++ b/packages/ra-ui-materialui/src/input/NumberInput.spec.tsx @@ -484,7 +484,9 @@ describe('', () => { ); const input = screen.getByLabelText('resources.posts.fields.views'); fireEvent.blur(input); - expect(onBlur).toHaveBeenCalled(); + expect(onBlur).toHaveBeenCalledWith( + expect.objectContaining({ type: 'blur' }) + ); }); it('should display error message onBlur if required', async () => { From bc137d02882db7523e72e11d8284b6b572ba6c19 Mon Sep 17 00:00:00 2001 From: Jan Biardzki <37340314+yanchesky@users.noreply.github.com> Date: Mon, 18 Mar 2024 12:57:29 +0100 Subject: [PATCH 5/5] Added test to verify that the event object is properly passed to the onBlur handler of the `AutocompleteInput` --- .../src/input/AutocompleteInput.spec.tsx | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx index c23f8e7855b..609793bab8c 100644 --- a/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx +++ b/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx @@ -1282,6 +1282,30 @@ describe('', () => { }); }); + it('should pass the event object to the onBlur callback', async () => { + const onBlur = jest.fn(); + render( + + + + + + ); + const input = screen.getByLabelText( + 'resources.users.fields.role' + ) as HTMLInputElement; + + fireEvent.blur(input); + + expect(onBlur).toHaveBeenCalledWith( + expect.objectContaining({ type: 'blur' }) + ); + }); + describe('Inside ', () => { it('should work inside a ReferenceInput field', async () => { render();