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,