diff --git a/src/components/InlineSearchInput/InlineSearchInput.test.tsx b/src/components/InlineSearchInput/InlineSearchInput.test.tsx index 527f9729..d7f5929f 100644 --- a/src/components/InlineSearchInput/InlineSearchInput.test.tsx +++ b/src/components/InlineSearchInput/InlineSearchInput.test.tsx @@ -96,18 +96,18 @@ describe('InlineSearchInput', () => { it('should clear controlled text input', () => { const { input, clearButton } = getInlineSearchInput( - , + , ); - if (input && clearButton) { - fireEvent.change(input, { target: { value: 'test' } }); + if (!input || !clearButton) return; - expect(input.value).toBe('1234'); + fireEvent.change(input, { target: { value: 'test' } }); - fireEvent.click(clearButton); + expect(input.value).toBe('test'); - expect(handleEventMock).toBeCalledWith({ target: { value: '' } }); - } + fireEvent.click(clearButton); + + expect(handleEventMock).toBeCalledWith({ target: { value: '' } }); expect(input).toBeDefined(); }); diff --git a/src/components/SearchInput/SearchInput.test.tsx b/src/components/SearchInput/SearchInput.test.tsx index a46d68eb..7159d3e6 100644 --- a/src/components/SearchInput/SearchInput.test.tsx +++ b/src/components/SearchInput/SearchInput.test.tsx @@ -103,13 +103,13 @@ describe('SearchInput', () => { it('should clear controlled text input', () => { const { input, clearButton } = getSearchInput( - , + , ); if (input && clearButton) { fireEvent.change(input, { target: { value: 'test' } }); - expect(input.value).toBe('1234'); + expect(input.value).toBe('test'); fireEvent.click(clearButton); diff --git a/src/components/TextInput/TextInput.test.tsx b/src/components/TextInput/TextInput.test.tsx index 78906512..e53a195a 100644 --- a/src/components/TextInput/TextInput.test.tsx +++ b/src/components/TextInput/TextInput.test.tsx @@ -126,18 +126,25 @@ describe('TextInput', () => { }); it('should clear controlled text input', () => { + const mockedOnChanged = vi.fn(); + const { input, clearButton } = getTextInput( - , + , ); if (input && clearButton) { - fireEvent.change(input, { target: { value: 'test' } }); + fireEvent.change(input, { target: { value: 'test value' } }); - expect(input.value).toBe('1234'); + expect(input.value).toBe('test value'); fireEvent.click(clearButton); - expect(handleEventMock).toBeCalledWith({ target: { value: '' } }); + expect(mockedOnChanged).toHaveBeenCalledWith( + expect.objectContaining({ + _reactName: 'onChange', + target: expect.objectContaining({ value: '' }), + }), + ); } expect(input).toBeDefined(); diff --git a/src/components/TextInput/useTextInput.ts b/src/components/TextInput/useTextInput.ts index efea8bc9..2f51caf8 100644 --- a/src/components/TextInput/useTextInput.ts +++ b/src/components/TextInput/useTextInput.ts @@ -1,5 +1,4 @@ import { - ChangeEvent, ChangeEventHandler, MouseEventHandler, FocusEvent, @@ -53,13 +52,33 @@ export const useTextInput = ({ [onChange], ); - const handleOnClear: MouseEventHandler = - useCallback(() => { - setInnerValue(''); - onChange?.({ - target: { value: '' }, - } as ChangeEvent); - }, [onChange]); + const handleOnClear: MouseEventHandler = () => { + setInnerValue(''); + + const input = containerRef.current?.querySelector('input'); + + if (!input) return; + + const valueSetter = Object.getOwnPropertyDescriptor( + input.constructor.prototype, + 'value', + )?.set; + + const prototype = Object.getPrototypeOf(input); + const prototypeValueSetter = Object.getOwnPropertyDescriptor( + prototype, + 'value', + )?.set; + + if (valueSetter && valueSetter !== prototypeValueSetter) { + prototypeValueSetter?.call(input, ''); + } else { + valueSetter?.call(input, ''); + } + + input.dispatchEvent(new Event('input', { bubbles: true })); + }; + return { innerValue, styles,