Fixed focus on EuiTabbedContent when initialFocus is selected (#3285)

* fixed focus on correct tab when initiali tab is 'selected' * added cl * CL Co-authored-by: Greg Thompson <[email protected]>
elastic · Apr 9, 2020 · d08ac11 · d08ac11
1 parent 6a0ab1e
commit d08ac11
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@
 
 **Bug Fixes**
 
+- Fixed `EuiTabbedContent` focus discrepancy between selected and initialFocus tabs ([#3285](https://github.com/elastic/eui/pull/3285))
 - Fixed the `initialSelectedTab` prop of `EuiTabbedContent` to not steal focus from content. Which fixed the bug in `EuiSuperDatePicker` that required two clicks to focus input in relative tab  ([#3154](https://github.com/elastic/eui/pull/3154))
 - Fixed the `img` element in `EuiIcon` using custom SVGs to have an `alt` attribute with an empty string, rather than no `alt` attribute at all ([#3245](https://github.com/elastic/eui/pull/3245))
 - Added overflows to EuiDataGrid toolbar dropdowns when there are many columns ([#3238](https://github.com/elastic/eui/pull/3238))

diff --git a/src/components/tabs/tabbed_content/tabbed_content.tsx b/src/components/tabs/tabbed_content/tabbed_content.tsx
@@ -108,15 +108,19 @@ export class EuiTabbedContent extends Component<
     }
   }
 
+  focusTab = () => {
+    const targetTab: HTMLDivElement | null = this.tabsRef.current!.querySelector(
+      `#${this.state.selectedTabId}`
+    );
+    targetTab!.focus();
+  };
+
   initializeFocus = () => {
     if (!this.state.inFocus && this.props.autoFocus === 'selected') {
       // Must wait for setState to finish before calling `.focus()`
       // as the focus call triggers a blur on the first tab
       this.setState({ inFocus: true }, () => {
-        const targetTab: HTMLDivElement | null = this.tabsRef.current!.querySelector(
-          `#${this.state.selectedTabId}`
-        );
-        targetTab!.focus();
+        this.focusTab();
       });
     }
   };
@@ -142,7 +146,9 @@ export class EuiTabbedContent extends Component<
 
     // Only track selection state if it's not controlled externally.
     if (!externalSelectedTab) {
-      this.setState({ selectedTabId: selectedTab.id });
+      this.setState({ selectedTabId: selectedTab.id }, () => {
+        this.focusTab();
+      });
     }
   };