fix: Do not always refocus tab if rerender happens

Author: danez

src/components/Tab.js

@@ -37,21 +37,12 @@ const propTypes = {
 
 const Tab = (props) => {
   let nodeRef = useRef();
-  const checkFocus = () => {
-    const { selected, focus } = props;
-    if (selected && focus) {
-      nodeRef.current.focus();
-    }
-  };
-  useEffect(() => {
-    checkFocus();
-  });
   const {
     children,
     className,
     disabled,
     disabledClassName,
-    focus, // unused
+    focus,
     id,
     panelId,
     selected,
@@ -61,6 +52,12 @@ const Tab = (props) => {
     ...attributes
   } = props;
 
+  useEffect(() => {
+    if (selected && focus) {
+      nodeRef.current.focus();
+    }
+  }, [selected, focus]);
+
   return (
     <li
       {...attributes}

src/components/__tests__/Tabs-test.js

@@ -609,6 +609,40 @@ describe('<Tabs />', () => {
     assertTabSelected(2);
   });
 
+  test('should not focus tab again on rerender', () => {
+    const { rerender } = render(
+      <>
+        <input data-testid="input1" />
+        {createTabs()}
+      </>,
+    );
+    const firstTab = screen.getByTestId('tab1');
+    const inputField = screen.getByTestId('input1');
+
+    expect(firstTab).not.toHaveFocus();
+    expect(inputField).not.toHaveFocus();
+
+    userEvent.click(firstTab);
+
+    expect(firstTab).toHaveFocus();
+    expect(inputField).not.toHaveFocus();
+
+    userEvent.click(inputField);
+
+    expect(firstTab).not.toHaveFocus();
+    expect(inputField).toHaveFocus();
+
+    rerender(
+      <>
+        <input data-testid="input1" />
+        {createTabs()}
+      </>,
+    );
+
+    expect(firstTab).not.toHaveFocus();
+    expect(inputField).toHaveFocus();
+  });
+
   test('should not change tabs when arrow up/down is pressed and disableUpDownKeys is passed', () => {
     render(
       createTabs({