fix: clearIcon add tabIndex (react-component#111)

* fix: clearIcon add tabIndex

* fix: test update

Author: wanpan11

src/BaseInput.tsx

@@ -84,6 +84,7 @@ const BaseInput = React.forwardRef<HolderRef, BaseInputProps>((props, ref) => {
       clearIcon = (
         <button
           type="button"
+          tabIndex={-1}
           onClick={(event) => {
             handleReset?.(event);
             onClear?.();

src/Input.tsx

@@ -1,6 +1,6 @@
 import clsx from 'classnames';
-import useMergedState from 'rc-util/lib/hooks/useMergedState';
-import omit from 'rc-util/lib/omit';
+import useMergedState from '@rc-component/util/lib/hooks/useMergedState';
+import omit from '@rc-component/util/lib/omit';
 import React, {
   forwardRef,
   useEffect,

tests/BaseInput.test.tsx

@@ -97,33 +97,33 @@ describe('BaseInput', () => {
       expect(inputEl!.value).toBe('');
     });
 
-    it('By focus and Space', async () => {
-      const { container } = render(<Demo />);
+    // it('By focus and Space', async () => {
+    //   const { container } = render(<Demo />);
 
-      const inputEl = container.querySelector('input');
-      await user.click(inputEl!);
+    //   const inputEl = container.querySelector('input');
+    //   await user.click(inputEl!);
 
-      await user.type(inputEl!, 'some text');
-      expect(inputEl!.value).toBe('some text');
+    //   await user.type(inputEl!, 'some text');
+    //   expect(inputEl!.value).toBe('some text');
 
-      await user.tab();
-      await user.keyboard('[Space]');
-      expect(inputEl!.value).toBe('');
-    });
+    //   await user.tab();
+    //   await user.keyboard('[Space]');
+    //   expect(inputEl!.value).toBe('');
+    // });
 
-    it('By focus and Enter', async () => {
-      const { container } = render(<Demo />);
+    // it('By focus and Enter', async () => {
+    //   const { container } = render(<Demo />);
 
-      const inputEl = container.querySelector('input');
-      await user.click(inputEl!);
+    //   const inputEl = container.querySelector('input');
+    //   await user.click(inputEl!);
 
-      await user.type(inputEl!, 'some text');
-      expect(inputEl!.value).toBe('some text');
+    //   await user.type(inputEl!, 'some text');
+    //   expect(inputEl!.value).toBe('some text');
 
-      await user.tab();
-      await user.keyboard('[Enter]');
-      expect(inputEl!.value).toBe('');
-    });
+    //   await user.tab();
+    //   await user.keyboard('[Enter]');
+    //   expect(inputEl!.value).toBe('');
+    // });
   });
 
   it('should display clearIcon correctly', () => {

tests/__snapshots__/index.test.tsx.snap

@@ -117,6 +117,7 @@ exports[`Input allowClear should change type when click 1`] = `
     >
       <button
         class="rc-input-clear-icon"
+        tabindex="-1"
         type="button"
       >
         ✖
@@ -141,6 +142,7 @@ exports[`Input allowClear should change type when click 2`] = `
     >
       <button
         class="rc-input-clear-icon rc-input-clear-icon-hidden"
+        tabindex="-1"
         type="button"
       >
         ✖
@@ -165,6 +167,7 @@ exports[`Input allowClear should not show icon if defaultValue is undefined or e
     >
       <button
         class="rc-input-clear-icon rc-input-clear-icon-hidden"
+        tabindex="-1"
         type="button"
       >
         ✖
@@ -189,6 +192,7 @@ exports[`Input allowClear should not show icon if defaultValue is undefined or e
     >
       <button
         class="rc-input-clear-icon rc-input-clear-icon-hidden"
+        tabindex="-1"
         type="button"
       >
         ✖
@@ -213,6 +217,7 @@ exports[`Input allowClear should not show icon if value is undefined or empty st
     >
       <button
         class="rc-input-clear-icon rc-input-clear-icon-hidden"
+        tabindex="-1"
         type="button"
       >
         ✖
@@ -237,6 +242,7 @@ exports[`Input allowClear should not show icon if value is undefined or empty st
     >
       <button
         class="rc-input-clear-icon rc-input-clear-icon-hidden"
+        tabindex="-1"
         type="button"
       >
         ✖

tests/focus.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
+import { spyElementPrototypes } from '@rc-component/util/lib/test/domHook';
 import Input from '../src';
 import { fireEvent, render } from '@testing-library/react';
 

tests/index.test.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
+import { spyElementPrototypes } from '@rc-component/util/lib/test/domHook';
 import React from 'react';
 import Input from '../src';
 import type { InputRef } from '../src/interface';