fix(TextInput): turn off event onBlur on input when use clear button (#…

…1458)
gravity-ui · Mar 29, 2024 · 3274c04 · 3274c04
1 parent 0cf2f95
commit 3274c04
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 4 deletions.
diff --git a/src/components/controls/TextInput/TextInput.tsx b/src/components/controls/TextInput/TextInput.tsx
@@ -163,8 +163,6 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(
 
             const control = innerControlRef.current;
             if (control) {
-                control.focus();
-
                 const syntheticEvent = Object.create(event);
                 syntheticEvent.target = control;
                 syntheticEvent.currentTarget = control;

diff --git a/src/components/controls/TextInput/__tests__/TextInput.input.test.tsx b/src/components/controls/TextInput/__tests__/TextInput.input.test.tsx
@@ -46,6 +46,37 @@ describe('TextInput input', () => {
                 expect(clearButton).toBeInTheDocument();
             });
 
+            test('check click on clear button not triggered onBlur event on input', async () => {
+                const onBlurFn = jest.fn();
+
+                render(<TextInput hasClear onBlur={onBlurFn} />);
+                const user = userEvent.setup();
+                const input = screen.getByRole('textbox');
+                await user.type(input, 'abc');
+                const clearButton = screen.getByRole('button', {name: 'Clear'});
+                await user.click(clearButton);
+
+                expect(onBlurFn).not.toHaveBeenCalled();
+            });
+
+            test('check trigger onBlur event on input', async () => {
+                const onBlurFn = jest.fn();
+
+                render(
+                    <React.Fragment>
+                        <TextInput hasClear onBlur={onBlurFn} />
+                        <div>outer</div>
+                    </React.Fragment>,
+                );
+                const user = userEvent.setup();
+                const input = screen.getByRole('textbox');
+                const outerDiv = screen.getByText('outer');
+                await user.type(input, 'abc');
+                await user.click(outerDiv);
+
+                expect(onBlurFn).toHaveBeenCalled();
+            });
+
             test('do not render clear button without hasClear prop', () => {
                 render(<TextInput />);
 

diff --git a/src/components/controls/common/ClearButton/ClearButton.tsx b/src/components/controls/common/ClearButton/ClearButton.tsx
@@ -44,13 +44,22 @@ export const mapTextInputSizeToButtonSize = (textInputSize: InputControlSize): B
 export const ClearButton = (props: Props) => {
     const {size, className, onClick} = props;
 
-    // TODO: remove using of Button component after https://github.com/gravity-ui/uikit/issues/645
+    /**
+     * Turn off event onBlur on input when use clear button
+     */
+    const preventDefaultHandler: React.MouseEventHandler<HTMLButtonElement> = (event) => {
+        event.preventDefault();
+    };
+
     return (
         <Button
             size={size}
             className={b(null, className)}
             onClick={onClick}
-            extraProps={{'aria-label': i18n('label_clear-button')}}
+            extraProps={{
+                onMouseDown: preventDefaultHandler,
+                'aria-label': i18n('label_clear-button'),
+            }}
         >
             <Icon data={Xmark} size={ICON_SIZE} />
         </Button>