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 = () => { ) } + +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 ( +
+ + + Tab with textfield + Other tab + + + + + Panel one + + + + + Panel two + + + +
+ ) +} 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)