From 994b40f96223e67fa5a359146b437c76e00ed279 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 19 Jun 2019 14:34:25 -0400
Subject: [PATCH] Added `autoFocus` option to `EuiTabbedContent`

---
 src-docs/src/views/tabs/tabbed_content.js     |  1 +
 .../date_popover/date_popover_content.js      |  1 +
 src/components/tabs/index.d.ts                |  3 ++
 .../__snapshots__/tabbed_content.test.js.snap |  6 ++-
 .../tabs/tabbed_content/tabbed_content.js     | 52 +++++++++++++++++--
 5 files changed, 57 insertions(+), 6 deletions(-)

diff --git a/src-docs/src/views/tabs/tabbed_content.js b/src-docs/src/views/tabs/tabbed_content.js
index b54f309d519..acb7746c754 100644
--- a/src-docs/src/views/tabs/tabbed_content.js
+++ b/src-docs/src/views/tabs/tabbed_content.js
@@ -91,6 +91,7 @@ class EuiTabsExample extends Component {
       <EuiTabbedContent
         tabs={this.tabs}
         initialSelectedTab={this.tabs[1]}
+        autoFocus="selected"
         onTabClick={tab => {
           console.log('clicked tab', tab);
         }}
diff --git a/src/components/date_picker/super_date_picker/date_popover/date_popover_content.js b/src/components/date_picker/super_date_picker/date_popover/date_popover_content.js
index a6ed6026fad..79629bd5323 100644
--- a/src/components/date_picker/super_date_picker/date_popover/date_popover_content.js
+++ b/src/components/date_picker/super_date_picker/date_popover/date_popover_content.js
@@ -91,6 +91,7 @@ export function EuiDatePopoverContent({
     <EuiTabbedContent
       className="euiDatePopoverContent"
       tabs={renderTabs()}
+      autoFocus="selected"
       initialSelectedTab={{ id: getDateMode(value) }}
       onTabClick={onTabClick}
       size="s"
diff --git a/src/components/tabs/index.d.ts b/src/components/tabs/index.d.ts
index 07a201dda07..59fa7bb3dc2 100644
--- a/src/components/tabs/index.d.ts
+++ b/src/components/tabs/index.d.ts
@@ -29,6 +29,8 @@ declare module '@elastic/eui' {
     content: ReactNode;
   }
 
+  type TABBED_CONTENT_AUTOFOCUS = 'initial' | 'selected';
+
   interface EuiTabbedContentProps {
     tabs: EuiTabbedContentTab[];
     onTabClick?: (tab: EuiTabbedContentTab) => void;
@@ -37,6 +39,7 @@ declare module '@elastic/eui' {
     size?: TAB_SIZES;
     display?: TAB_DISPLAYS;
     expand?: boolean;
+    autoFocus?: TABBED_CONTENT_AUTOFOCUS;
   }
 
   export const EuiTab: FunctionComponent<
diff --git a/src/components/tabs/tabbed_content/__snapshots__/tabbed_content.test.js.snap b/src/components/tabs/tabbed_content/__snapshots__/tabbed_content.test.js.snap
index e0d0cd2da8a..2fc0b3a4124 100644
--- a/src/components/tabs/tabbed_content/__snapshots__/tabbed_content.test.js.snap
+++ b/src/components/tabs/tabbed_content/__snapshots__/tabbed_content.test.js.snap
@@ -50,6 +50,7 @@ exports[`EuiTabbedContent behavior when selected tab state isn't controlled by t
 
 exports[`EuiTabbedContent behavior when uncontrolled, the selected tab should update if it receives new content 1`] = `
 <EuiTabbedContent
+  autoFocus="initial"
   tabs={
     Array [
       Object {
@@ -70,7 +71,10 @@ exports[`EuiTabbedContent behavior when uncontrolled, the selected tab should up
     ]
   }
 >
-  <div>
+  <div
+    onBlur={[Function]}
+    onFocus={[Function]}
+  >
     <EuiTabs
       display="default"
       expand={false}
diff --git a/src/components/tabs/tabbed_content/tabbed_content.js b/src/components/tabs/tabbed_content/tabbed_content.js
index bcfd4568426..2e1ce89d6a5 100644
--- a/src/components/tabs/tabbed_content/tabbed_content.js
+++ b/src/components/tabs/tabbed_content/tabbed_content.js
@@ -8,6 +8,8 @@ import { EuiTab } from '../tab';
 
 const makeId = htmlIdGenerator();
 
+export const AUTOFOCUS = ['initial', 'selected'];
+
 export class EuiTabbedContent extends Component {
   static propTypes = {
     className: PropTypes.string,
@@ -29,6 +31,12 @@ export class EuiTabbedContent extends Component {
      * Use this prop if you want to control selection state within the owner component
      */
     selectedTab: PropTypes.object,
+    /**
+     * When tabbing to into the tabs, set the focus on `initial` for the first tab,
+     * or `selected` for the currently selected tab. Best use case is for inside of
+     * overlay content like popovers or flyouts.
+     */
+    autoFocus: PropTypes.oneOf(AUTOFOCUS),
     size: PropTypes.oneOf(SIZES),
     /**
      * Each tab needs id and content properties, so we can associate it with its panel for accessibility.
@@ -51,14 +59,39 @@ export class EuiTabbedContent extends Component {
     this.rootId = makeId();
 
     // Only track selection state if it's not controlled externally.
+    let selectedTabId;
     if (!selectedTab) {
-      this.state = {
-        selectedTabId:
-          (initialSelectedTab && initialSelectedTab.id) || tabs[0].id,
-      };
+      selectedTabId =
+        (initialSelectedTab && initialSelectedTab.id) || tabs[0].id;
     }
+
+    this.state = {
+      selectedTabId,
+      inFocus: false,
+    };
   }
 
+  initializeFocus = () => {
+    console.log('THE FOCUS HAPPENED');
+
+    if (!this.state.inFocus && this.props.autoFocus === 'selected') {
+      console.log('Focusing selected tab');
+      document.getElementById(this.state.selectedTabId).focus();
+    }
+
+    this.setState({
+      inFocus: true,
+    });
+  };
+
+  removeFocus = () => {
+    console.log('THE BLUR HAPPENED');
+
+    this.setState({
+      // inFocus: false,
+    });
+  };
+
   onTabClick = selectedTab => {
     const { onTabClick, selectedTab: externalSelectedTab } = this.props;
 
@@ -82,6 +115,7 @@ export class EuiTabbedContent extends Component {
       selectedTab: externalSelectedTab,
       size,
       tabs,
+      autoFocus,
       ...rest
     } = this.props;
 
@@ -93,7 +127,11 @@ export class EuiTabbedContent extends Component {
     const { content: selectedTabContent, id: selectedTabId } = selectedTab;
 
     return (
-      <div className={className} {...rest}>
+      <div
+        className={className}
+        {...rest}
+        onFocus={this.initializeFocus}
+        onBlur={this.removeFocus}>
         <EuiTabs expand={expand} display={display} size={size}>
           {tabs.map(tab => {
             const {
@@ -125,3 +163,7 @@ export class EuiTabbedContent extends Component {
     );
   }
 }
+
+EuiTabbedContent.defaultProps = {
+  autoFocus: 'initial',
+};