From 3e30c1420fc314e372deb83a23537a315da296e5 Mon Sep 17 00:00:00 2001
From: Victor Nystad <vnys@equinor.com>
Date: Tue, 16 Jun 2020 09:16:18 +0200
Subject: [PATCH] =?UTF-8?q?don=E2=80=99t=20focus=20if=20target=20is=20not?=
 =?UTF-8?q?=20tab=20(#370)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/storybook-react/stories/Tabs.stories.jsx | 54 +++++++++++++++++++
 libraries/core-react/src/Tabs/Tabs.jsx        |  3 ++
 2 files changed, 57 insertions(+)

diff --git a/apps/storybook-react/stories/Tabs.stories.jsx b/apps/storybook-react/stories/Tabs.stories.jsx
index 39442ade6b..df59659416 100644
--- a/apps/storybook-react/stories/Tabs.stories.jsx
+++ b/apps/storybook-react/stories/Tabs.stories.jsx
@@ -148,3 +148,57 @@ export const tabsAndSearch = () => {
     </div>
   )
 }
+
+export const tabsAndInputInPanel = () => {
+  const [searchText, setSearchText] = useState('')
+  const [activeTab, setActiveTab] = useState(0)
+
+  const handleOnTextChange = (event) => {
+    const value = event.target.value
+    setSearchText(value)
+  }
+  const handleChange = (index) => {
+    setActiveTab(index)
+  }
+
+  const handleFocus = (e) => {
+    action('handleFocus')(e.target.textContent)
+  }
+
+  const handleBlur = (e) => {
+    action('handleBlur')(e.target.textContent)
+  }
+
+  return (
+    <div style={{ margin: '4rem' }}>
+      <Tabs
+        style={{ marginTop: '2rem' }}
+        activeTab={activeTab}
+        onChange={handleChange}
+        variant="fullWidth"
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+      >
+        <TabList>
+          <Tab>Tab with textfield</Tab>
+          <Tab>Other tab</Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel style={{ maxWidth: '20em' }}>
+            <Typography variant="body_short" style={{ marginBottom: '1rem' }}>
+              Panel one
+            </Typography>
+            <Search
+              value={searchText}
+              placeholder={'Search '}
+              onChange={handleOnTextChange}
+            />
+          </TabPanel>
+          <TabPanel>
+            <Typography variant="body_short">Panel two</Typography>
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+    </div>
+  )
+}
diff --git a/libraries/core-react/src/Tabs/Tabs.jsx b/libraries/core-react/src/Tabs/Tabs.jsx
index 71466f27b5..f3895e1666 100644
--- a/libraries/core-react/src/Tabs/Tabs.jsx
+++ b/libraries/core-react/src/Tabs/Tabs.jsx
@@ -23,6 +23,9 @@ const Tabs = forwardRef(function Tabs(
   }
 
   const handleFocus = (e) => {
+    if (e.target.getAttribute('role') !== 'tab') {
+      return
+    }
     clearTimeout(blurTimer)
     if (!tabsFocused) {
       setTabsFocused(true)