don’t focus if target is not tab (#370)

equinor · Jun 16, 2020 · 3e30c14 · 3e30c14
1 parent 47bc5bb
commit 3e30c14
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 0 deletions.
diff --git 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
@@ -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)