diff --git a/packages/react/src/components/Tab/Tab-test.js b/packages/react/src/components/Tab/Tab-test.js
index fdd59ac083c4..b7d526f8b9c1 100644
--- a/packages/react/src/components/Tab/Tab-test.js
+++ b/packages/react/src/components/Tab/Tab-test.js
@@ -101,21 +101,18 @@ describe('Tab', () => {
describe('keydown', () => {
const onKeyDown = jest.fn();
- const handleTabAnchorFocus = jest.fn();
const handleTabKeyDown = jest.fn();
const wrapper = shallow();
- wrapper.setProps({ onKeyDown, handleTabAnchorFocus, handleTabKeyDown });
+ wrapper.setProps({ onKeyDown, handleTabKeyDown });
it('invokes onKeyDown when a function is passed to onKeyDown prop', () => {
wrapper.simulate('keyDown', { which: 38 });
expect(onKeyDown).toBeCalled();
- expect(handleTabAnchorFocus).not.toBeCalled();
});
it('invokes handleTabAnchorFocus when onKeyDown occurs for appropriate events', () => {
wrapper.simulate('keyDown', { which: 37 });
expect(onKeyDown).toBeCalled();
- expect(handleTabAnchorFocus).toBeCalled();
});
});
});
diff --git a/packages/react/src/components/Tab/Tab.js b/packages/react/src/components/Tab/Tab.js
index 5c35b034cfff..dde7ce38914a 100644
--- a/packages/react/src/components/Tab/Tab.js
+++ b/packages/react/src/components/Tab/Tab.js
@@ -26,12 +26,6 @@ export default class Tab extends React.Component {
*/
handleTabClick: PropTypes.func,
- /**
- * A handler that is invoked when a user presses left/right key.
- * Reserved for usage in Tabs
- */
- handleTabAnchorFocus: PropTypes.func,
-
/**
* A handler that is invoked on the key down event for the control.
* Reserved for usage in Tabs
@@ -108,23 +102,10 @@ export default class Tab extends React.Component {
onKeyDown: () => {},
};
- setTabFocus(evt) {
- const leftKey = 37;
- const rightKey = 39;
- if (evt.which === leftKey) {
- this.props.handleTabAnchorFocus(this.props.index - 1);
- } else if (evt.which === rightKey) {
- this.props.handleTabAnchorFocus(this.props.index + 1);
- } else {
- return;
- }
- }
-
render() {
const {
className,
handleTabClick,
- handleTabAnchorFocus, // eslint-disable-line
handleTabKeyDown,
disabled,
href,
@@ -172,7 +153,6 @@ export default class Tab extends React.Component {
if (disabled) {
return;
}
- this.setTabFocus(evt);
handleTabKeyDown(index, evt);
onKeyDown(evt);
}}
diff --git a/packages/react/src/components/Tabs/Tabs-story.js b/packages/react/src/components/Tabs/Tabs-story.js
index 1adea0976a6c..e49bdfbc7fbf 100644
--- a/packages/react/src/components/Tabs/Tabs-story.js
+++ b/packages/react/src/components/Tabs/Tabs-story.js
@@ -78,14 +78,17 @@ storiesOf('Tabs', module)
Content for second tab goes here.
+
+ Content for third tab goes here.
+
- Content for third tab goes here.
+ Content for fourth tab goes here.
}>
- Content for fourth tab goes here.
+ Content for fifth tab goes here.
),
diff --git a/packages/react/src/components/Tabs/Tabs-test.js b/packages/react/src/components/Tabs/Tabs-test.js
index 55f5034c7032..365ae339c2a7 100644
--- a/packages/react/src/components/Tabs/Tabs-test.js
+++ b/packages/react/src/components/Tabs/Tabs-test.js
@@ -7,14 +7,25 @@
import React from 'react';
import { ChevronDownGlyph } from '@carbon/icons-react';
+import { settings } from 'carbon-components';
+import { shallow, mount } from 'enzyme';
import Tabs from '../Tabs';
import Tab from '../Tab';
import TabsSkeleton from '../Tabs/Tabs.Skeleton';
-import { shallow, mount } from 'enzyme';
-import { settings } from 'carbon-components';
const { prefix } = settings;
+window.matchMedia = jest.fn().mockImplementation(query => ({
+ matches: true,
+ media: query,
+ onchange: null,
+ addListener: jest.fn(), // deprecated
+ removeListener: jest.fn(), // deprecated
+ addEventListener: jest.fn(),
+ removeEventListener: jest.fn(),
+ dispatchEvent: jest.fn(),
+}));
+
describe('Tabs', () => {
describe('renders as expected', () => {
describe('navigation ()', () => {
@@ -241,6 +252,53 @@ describe('Tabs', () => {
expect(wrapper.state().selected).toEqual(1);
});
});
+
+ describe('ignore disabled child tab', () => {
+ let wrapper;
+ let firstTab;
+ let lastTab;
+ beforeEach(() => {
+ wrapper = mount(
+
+
+ content1
+
+
+ content2
+
+
+ content3
+
+
+ );
+ firstTab = wrapper.find('.firstTab').last();
+ lastTab = wrapper.find('.lastTab').last();
+ });
+ it('updates selected state when pressing arrow keys', () => {
+ firstTab.simulate('keydown', { which: rightKey });
+ expect(wrapper.state().selected).toEqual(2);
+ lastTab.simulate('keydown', { which: leftKey });
+ expect(wrapper.state().selected).toEqual(0);
+ });
+
+ it('loops focus and selected state from lastTab to firstTab', () => {
+ wrapper.setState({ selected: 2 });
+ lastTab.simulate('keydown', { which: rightKey });
+ expect(wrapper.state().selected).toEqual(0);
+ });
+
+ it('loops focus and selected state from firstTab to lastTab', () => {
+ firstTab.simulate('keydown', { which: leftKey });
+ expect(wrapper.state().selected).toEqual(2);
+ });
+
+ it('updates selected state when pressing space or enter key', () => {
+ firstTab.simulate('keydown', { which: spaceKey });
+ expect(wrapper.state().selected).toEqual(0);
+ lastTab.simulate('keydown', { which: enterKey });
+ expect(wrapper.state().selected).toEqual(2);
+ });
+ });
});
});
diff --git a/packages/react/src/components/Tabs/Tabs.js b/packages/react/src/components/Tabs/Tabs.js
index 00979a33b700..5b2372a8e5af 100644
--- a/packages/react/src/components/Tabs/Tabs.js
+++ b/packages/react/src/components/Tabs/Tabs.js
@@ -10,6 +10,7 @@ import React from 'react';
import classNames from 'classnames';
import { ChevronDownGlyph } from '@carbon/icons-react';
import { settings } from 'carbon-components';
+import { keys, match, matches } from '../../internal/keyboard';
const { prefix } = settings;
@@ -116,6 +117,12 @@ export default class Tabs extends React.Component {
return React.Children.map(this.props.children, tab => tab);
}
+ getEnabledTabs = () =>
+ React.Children.toArray(this.props.children).reduce(
+ (acc, tab, index) => (!tab.props.disabled ? acc.concat(index) : acc),
+ []
+ );
+
getTabAt = (index, useFresh) => {
return (
(!useFresh && this[`tab${index}`]) ||
@@ -139,35 +146,47 @@ export default class Tabs extends React.Component {
};
};
+ getDirection = evt => {
+ if (match(evt, keys.ArrowLeft)) {
+ return -1;
+ }
+ if (match(evt, keys.ArrowRight)) {
+ return 1;
+ }
+ return 0;
+ };
+
+ getNextIndex = (index, direction) => {
+ const enabledTabs = this.getEnabledTabs();
+ const nextIndex = Math.max(
+ enabledTabs.indexOf(index) + direction,
+ -1 /* For `tab` not found in `enabledTabs` */
+ );
+ const nextIndexLooped =
+ nextIndex >= 0 && nextIndex < enabledTabs.length
+ ? nextIndex
+ : nextIndex - Math.sign(nextIndex) * enabledTabs.length;
+ return enabledTabs[nextIndexLooped];
+ };
+
handleTabKeyDown = onSelectionChange => {
return (index, evt) => {
- const key = evt.key || evt.which;
-
- if (key === 'Enter' || key === 13 || key === ' ' || key === 32) {
+ if (matches(evt, [keys.Enter, keys.Space])) {
this.selectTabAt(index, onSelectionChange);
this.setState({
dropdownHidden: true,
});
}
- };
- };
-
- handleTabAnchorFocus = onSelectionChange => {
- return index => {
- const tabCount = React.Children.count(this.props.children) - 1;
- let tabIndex = index;
- if (index < 0) {
- tabIndex = tabCount;
- } else if (index > tabCount) {
- tabIndex = 0;
- }
-
- const tab = this.getTabAt(tabIndex);
- if (tab) {
- this.selectTabAt(tabIndex, onSelectionChange);
- if (tab.tabAnchor) {
- tab.tabAnchor.focus();
+ if (window.matchMedia('(min-width: 42rem)').matches) {
+ evt.preventDefault();
+ const nextIndex = this.getNextIndex(index, this.getDirection(evt));
+ const tab = this.getTabAt(nextIndex);
+ if (tab) {
+ this.selectTabAt(nextIndex, onSelectionChange);
+ if (tab.tabAnchor) {
+ tab.tabAnchor.focus();
+ }
}
}
};
@@ -222,7 +241,6 @@ export default class Tabs extends React.Component {
index,
selected: index === this.state.selected,
handleTabClick: this.handleTabClick(onSelectionChange),
- handleTabAnchorFocus: this.handleTabAnchorFocus(onSelectionChange),
tabIndex,
ref: e => {
this.setTabAt(index, e);