diff --git a/src/components/Tabs.js b/src/components/Tabs.js
index f374c66cfc..5416b14488 100644
--- a/src/components/Tabs.js
+++ b/src/components/Tabs.js
@@ -64,42 +64,41 @@ For more information about controlled and uncontrolled mode of react-tabs see ht
* It is initialized from the prop defaultFocus, and after the first render it is reset back to false. Later it can become true again when using keys to navigate the tabs.
*/
const Tabs = (props) => {
- const [focus, setFocus] = useState(props.defaultFocus);
+ const { children, defaultFocus, defaultIndex, onSelect } = props;
+
+ const [focus, setFocus] = useState(defaultFocus);
const [mode] = useState(getModeFromProps(props));
const [selectedIndex, setSelectedIndex] = useState(
- mode === MODE_UNCONTROLLED ? props.defaultIndex || 0 : null,
+ mode === MODE_UNCONTROLLED ? defaultIndex || 0 : null,
);
- // Reset focus after initial render, see comment above
useEffect(() => {
+ // Reset focus after initial render, see comment above
setFocus(false);
}, []);
if (mode === MODE_UNCONTROLLED) {
// Ensure that we handle removed tabs and don't let selectedIndex get out of bounds
+ const tabsCount = getTabsCount(children);
useEffect(() => {
if (selectedIndex != null) {
- const maxTabIndex = Math.max(0, getTabsCount(props.children) - 1);
+ const maxTabIndex = Math.max(0, tabsCount - 1);
setSelectedIndex(Math.min(selectedIndex, maxTabIndex));
}
- }, [getTabsCount(props.children)]);
+ }, [tabsCount]);
}
checkForIllegalModeChange(props, mode);
const handleSelected = (index, last, event) => {
- const { onSelect } = props;
-
// Call change event handler
if (typeof onSelect === 'function') {
// Check if the change event handler cancels the tab change
if (onSelect(index, last, event) === false) return;
}
- if (event.type === 'keydown') {
- // Set focus if the change was triggered from the keyboard
- setFocus(true);
- }
+ // Always set focus on tabs
+ setFocus(true);
if (mode === MODE_UNCONTROLLED) {
// Update selected index
@@ -107,19 +106,19 @@ const Tabs = (props) => {
}
};
- let newProps = { ...props };
- const { children } = props;
+ let subProps = { ...props };
- newProps.focus = focus;
- newProps.onSelect = handleSelected;
+ subProps.focus = focus;
+ subProps.onSelect = handleSelected;
if (selectedIndex != null) {
- newProps.selectedIndex = selectedIndex;
+ subProps.selectedIndex = selectedIndex;
}
- delete newProps.defaultFocus;
- delete newProps.defaultIndex;
- return {children};
+ delete subProps.defaultFocus;
+ delete subProps.defaultIndex;
+ return {children};
};
+
Tabs.propTypes = propTypes;
Tabs.defaultProps = defaultProps;
Tabs.tabsRole = 'Tabs';
diff --git a/style/react-tabs.css b/style/react-tabs.css
index 8bb668b70d..eeddde5bae 100644
--- a/style/react-tabs.css
+++ b/style/react-tabs.css
@@ -32,13 +32,11 @@
}
.react-tabs__tab:focus {
- box-shadow: 0 0 5px hsl(208, 99%, 50%);
- border-color: hsl(208, 99%, 50%);
outline: none;
}
.react-tabs__tab:focus:after {
- content: "";
+ content: '';
position: absolute;
height: 5px;
left: -4px;
diff --git a/style/react-tabs.less b/style/react-tabs.less
index 87c792e1c6..73264d418c 100644
--- a/style/react-tabs.less
+++ b/style/react-tabs.less
@@ -30,8 +30,6 @@
}
&:focus {
- box-shadow: 0 0 5px hsl(208, 99%, 50%);
- border-color: hsl(208, 99%, 50%);
outline: none;
&:after {
diff --git a/style/react-tabs.scss b/style/react-tabs.scss
index 87c792e1c6..73264d418c 100644
--- a/style/react-tabs.scss
+++ b/style/react-tabs.scss
@@ -30,8 +30,6 @@
}
&:focus {
- box-shadow: 0 0 5px hsl(208, 99%, 50%);
- border-color: hsl(208, 99%, 50%);
outline: none;
&:after {