From d08ac11f8b5249cfe2620b4966ac1d1a93d6e1c7 Mon Sep 17 00:00:00 2001 From: Ashik Meerankutty Date: Thu, 9 Apr 2020 21:48:29 +0530 Subject: [PATCH] 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 --- CHANGELOG.md | 1 + .../tabs/tabbed_content/tabbed_content.tsx | 16 +++++++++++----- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9ce75f2cfc1..3408c713622 100644 --- 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 index 9c50007495c..380b50db056 100644 --- 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(); + }); } };