Fix focus and rename active -> selected

Author: danez

src/components/Tab.js

@@ -5,17 +5,16 @@ import cx from 'classnames';
 export default class Tab extends Component {
 
   static defaultProps = {
-    activeClassName: 'ReactTabs__Tab--selected',
     className: 'ReactTabs__Tab',
     disabledClassName: 'ReactTabs__Tab--disabled',
     focus: false,
     id: null,
     panelId: null,
     selected: false,
+    selectedClassName: 'ReactTabs__Tab--selected',
   };
 
   static propTypes = {
-    activeClassName: PropTypes.string, // private
     children: PropTypes.oneOfType([
       PropTypes.array,
       PropTypes.object,
@@ -28,6 +27,7 @@ export default class Tab extends Component {
     id: PropTypes.string, // private
     panelId: PropTypes.string, // private
     selected: PropTypes.bool, // private
+    selectedClassName: PropTypes.string, // private
     tabRef: PropTypes.func, // private
   };
 
@@ -47,7 +47,6 @@ export default class Tab extends Component {
 
   render() {
     const {
-      activeClassName,
       children,
       className,
       disabled,
@@ -56,6 +55,7 @@ export default class Tab extends Component {
       id,
       panelId,
       selected,
+      selectedClassName,
       tabRef,
       ...attributes } = this.props;
 
@@ -65,7 +65,7 @@ export default class Tab extends Component {
         className={cx(
           className,
           {
-            [activeClassName]: selected,
+            [selectedClassName]: selected,
             [disabledClassName]: disabled,
           },
         )}

src/components/TabPanel.js

@@ -5,14 +5,14 @@ import cx from 'classnames';
 export default class TabPanel extends Component {
 
   static defaultProps = {
-    activeClassName: 'ReactTabs__TabPanel--selected',
     className: 'ReactTabs__TabPanel',
     forceRender: false,
+    selectedClassName: 'ReactTabs__TabPanel--selected',
     style: {},
   };
 
   static propTypes = {
-    activeClassName: PropTypes.string, // private
+    selectedClassName: PropTypes.string, // private
     children: PropTypes.node,
     className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
     forceRender: PropTypes.bool,
@@ -24,12 +24,12 @@ export default class TabPanel extends Component {
 
   render() {
     const {
-      activeClassName,
       children,
       className,
       forceRender,
       id,
       selected,
+      selectedClassName,
       style,
       tabId,
       ...attributes } = this.props;
@@ -40,7 +40,7 @@ export default class TabPanel extends Component {
         className={cx(
           className,
           {
-            [activeClassName]: selected,
+            [selectedClassName]: selected,
           },
         )}
         role="tabpanel"

src/components/Tabs.js

@@ -14,8 +14,6 @@ export default class Tabs extends Component {
   };
 
   static propTypes = {
-    activeTabClassName: PropTypes.string,
-    activeTabPanelClassName: PropTypes.string,
     children: childrenPropType,
     className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
     defaultFocus: PropTypes.bool,
@@ -24,12 +22,14 @@ export default class Tabs extends Component {
     forceRenderTabPanel: PropTypes.bool,
     onSelect: onSelectPropType,
     selectedIndex: selectedIndexPropType,
+    selectedTabClassName: PropTypes.string,
+    selectedTabPanelClassName: PropTypes.string,
   };
 
   constructor(props) {
     super(props);
 
-    this.state = Tabs.copyPropsToState(this.props, {});
+    this.state = Tabs.copyPropsToState(this.props, {}, this.props.defaultFocus);
   }
 
   componentWillReceiveProps(newProps) {
@@ -74,9 +74,9 @@ For more information about controlled and uncontrolled mode of react-tabs see th
 
   // preserve the existing selectedIndex from state.
   // If the state has not selectedIndex, default to the defaultIndex or 0
-  static copyPropsToState(props, state) {
+  static copyPropsToState(props, state, focus = false) {
     const newState = {
-      focus: state.focus || props.defaultFocus,
+      focus,
     };
 
     if (Tabs.inUncontrolledMode(props)) {
@@ -95,25 +95,6 @@ For more information about controlled and uncontrolled mode of react-tabs see th
   }
 
   render() {
-    // This fixes an issue with focus management.
-    //
-    // Ultimately, when focus is true, and an input has focus,
-    // and any change on that input causes a state change/re-render,
-    // focus gets sent back to the active tab, and input loses focus.
-    //
-    // Since the focus state only needs to be remembered
-    // for the current render, we can reset it once the
-    // render has happened.
-    //
-    // Don't use setState, because we don't want to re-render.
-    //
-    // See https://github.com/reactjs/react-tabs/pull/7
-    if (this.state.focus) {
-      setTimeout(() => {
-        this.state.focus = false;
-      }, 0);
-    }
-
     const { children, defaultIndex, defaultFocus, ...props } = this.props;
 
     props.focus = this.state.focus;

src/components/UncontrolledTabs.js

@@ -26,15 +26,15 @@ export default class UncontrolledTabs extends Component {
   };
 
   static propTypes = {
-    activeTabClassName: PropTypes.string,
-    activeTabPanelClassName: PropTypes.string,
     children: childrenPropType,
-    className: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+    className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
     disabledTabClassName: PropTypes.string,
     focus: PropTypes.bool,
     forceRenderTabPanel: PropTypes.bool,
     onSelect: PropTypes.func.isRequired,
     selectedIndex: PropTypes.number.isRequired,
+    selectedTabClassName: PropTypes.string,
+    selectedTabPanelClassName: PropTypes.string,
   };
 
   tabNodes = [];
@@ -106,7 +106,16 @@ export default class UncontrolledTabs extends Component {
 
   getChildren() {
     let index = 0;
-    const children = this.props.children;
+    const {
+      children,
+      disabledTabClassName,
+      focus,
+      forceRenderTabPanel,
+      selectedIndex,
+      selectedTabClassName,
+      selectedTabPanelClassName,
+    } = this.props;
+
     this.tabIds = this.tabIds || [];
     this.panelIds = this.panelIds || [];
     let diff = this.tabIds.length - this.getTabsCount();
@@ -132,7 +141,13 @@ export default class UncontrolledTabs extends Component {
       // Clone TabList and Tab components to have refs
       if (child.type === TabList) {
         let listIndex = 0;
-        // TODO try setting the uuid in the "constructor" for `Tab`/`TabPanel`
+
+        // Figure out if the current focus in the DOM is set on a Tab
+        // If it is we should keep the focus on the next selected tab
+        const wasTabFocused = React.Children.toArray(child.props.children)
+          .filter(tab => tab.type === Tab)
+          .some((tab, i) => document.activeElement === this.getTab(i));
+
         result = cloneElement(child, {
           children: React.Children.map(child.props.children, (tab) => {
             // null happens when conditionally rendering TabPanel/Tab
@@ -146,43 +161,37 @@ export default class UncontrolledTabs extends Component {
             if (tab.type !== Tab) return tab;
 
             const key = `tabs-${listIndex}`;
-            const tabRef = (node) => { this.tabNodes[key] = node; };
-            const id = this.tabIds[listIndex];
-            const panelId = this.panelIds[listIndex];
-            const selected = this.props.selectedIndex === listIndex;
-            const focus = selected && this.props.focus;
-            const activeClassName = this.props.activeTabClassName;
-            const disabledClassName = this.props.disabledTabClassName;
+            const selected = selectedIndex === listIndex;
+
+            const props = {
+              tabRef: (node) => { this.tabNodes[key] = node; },
+              id: this.tabIds[listIndex],
+              panelId: this.panelIds[listIndex],
+              selected,
+              focus: selected && (focus || wasTabFocused),
+            };
+
+            if (selectedTabClassName) props.selectedClassName = selectedTabClassName;
+            if (disabledTabClassName) props.disabledClassName = disabledTabClassName;
 
             listIndex++;
 
-            return cloneElement(tab, {
-              tabRef,
-              id,
-              panelId,
-              selected,
-              focus,
-              activeClassName,
-              disabledClassName,
-            });
+            return cloneElement(tab, props);
           }),
         });
       } else if (child.type === TabPanel) {
-        const id = this.panelIds[index];
-        const tabId = this.tabIds[index];
-        const selected = this.props.selectedIndex === index;
-        const forceRender = this.props.forceRenderTabPanel;
-        const activeClassName = this.props.activeTabPanelClassName;
+        const props = {
+          id: this.panelIds[index],
+          tabId: this.tabIds[index],
+          selected: selectedIndex === index,
+        };
+
+        if (forceRenderTabPanel) props.forceRender = forceRenderTabPanel;
+        if (selectedTabPanelClassName) props.selectedClassName = selectedTabPanelClassName;
 
         index++;
 
-        result = cloneElement(child, {
-          id,
-          tabId,
-          selected,
-          forceRender,
-          activeClassName,
-        });
+        result = cloneElement(child, props);
       }
 
       return result;
@@ -254,12 +263,15 @@ export default class UncontrolledTabs extends Component {
   render() {
     // Delete all known props, so they don't get added to DOM
     const {
+        children,
         className,
-        selectedIndex,
-        onSelect,
+        disabledTabClassName,
         focus,
-        children,
         forceRenderTabPanel,
+        onSelect,
+        selectedIndex,
+        selectedTabClassName,
+        selectedTabPanelClassName,
         ...attributes
     } = this.props;
 

src/components/__tests__/Tab-test.js

@@ -26,7 +26,7 @@ describe('<Tab />', () => {
   it('should accept className', () => {
     const wrapper = shallow(<Tab className="foobar" />);
 
-    expect(wrapper.hasClass('ReactTabs__Tab')).toBe(true);
+    expect(wrapper.hasClass('ReactTabs__Tab')).toBe(false);
     expect(wrapper.hasClass('foobar')).toBe(true);
   });
 
@@ -42,6 +42,15 @@ describe('<Tab />', () => {
     expect(wrapper.text()).toBe('Hello');
   });
 
+  it('should support being selected with custom class', () => {
+    const wrapper = shallow(<Tab selected selectedClassName="cool" />);
+
+    expect(wrapper.hasClass('ReactTabs__Tab')).toBe(true);
+    expect(wrapper.hasClass('ReactTabs__Tab--selected')).toBe(false);
+    expect(wrapper.hasClass('cool')).toBe(true);
+    expect(wrapper.prop('aria-selected')).toBe('true');
+  });
+
   it('should support being disabled', () => {
     const wrapper = shallow(<Tab disabled />);
 
@@ -50,6 +59,15 @@ describe('<Tab />', () => {
     expect(wrapper.prop('aria-disabled')).toBe('true');
   });
 
+  it('should support being disabled with custom class name', () => {
+    const wrapper = shallow(<Tab disabled disabledClassName="coolDisabled" />);
+
+    expect(wrapper.hasClass('ReactTabs__Tab')).toBe(true);
+    expect(wrapper.hasClass('ReactTabs__Tab--disabled')).toBe(false);
+    expect(wrapper.hasClass('coolDisabled')).toBe(true);
+    expect(wrapper.prop('aria-disabled')).toBe('true');
+  });
+
   it('should pass through custom properties', () => {
     const wrapper = shallow(<Tab data-tooltip="Tooltip contents" />);
 

src/components/__tests__/TabList-test.js

@@ -28,7 +28,7 @@ describe('<TabList />', () => {
   it('should accept className', () => {
     const wrapper = shallow(<TabList className="foobar" />);
 
-    expect(wrapper.hasClass('ReactTabs__TabList')).toBe(true);
+    expect(wrapper.hasClass('ReactTabs__TabList')).toBe(false);
     expect(wrapper.hasClass('foobar')).toBe(true);
   });
 
@@ -62,10 +62,10 @@ describe('<TabList />', () => {
     expect(hasClassAt(tabsList, 1, 'ReactTabs__Tab--disabled')).toBe(true);
   });
 
-  it('should display the custom classnames for active and disabled tab', () => {
+  it('should display the custom classnames for selected and disabled tab specified on tabs', () => {
     const wrapper = mount(
-      <Tabs defaultIndex={0}>
-        <TabList activeTabClassName="active" disabledTabClassName="disabled">
+      <Tabs defaultIndex={0} selectedTabClassName="active" disabledTabClassName="disabled">
+        <TabList>
           <Tab>Foo</Tab>
           <Tab disabled>Bar</Tab>
         </TabList>
@@ -81,4 +81,24 @@ describe('<TabList />', () => {
     expect(hasClassAt(tabsList, 0, 'active')).toBe(true);
     expect(hasClassAt(tabsList, 1, 'disabled')).toBe(true);
   });
+
+  it('should display the custom classnames for selected and disabled tab', () => {
+    const wrapper = mount(
+      <Tabs defaultIndex={0}>
+        <TabList>
+          <Tab selectedClassName="active" disabledClassName="disabled">Foo</Tab>
+          <Tab disabled selectedClassName="active" disabledClassName="disabled">Bar</Tab>
+        </TabList>
+        <TabPanel>Foo</TabPanel>
+        <TabPanel>Bar</TabPanel>
+      </Tabs>,
+    );
+
+    const tabsList = wrapper.childAt(0);
+    expect(hasClassAt(tabsList, 0, 'ReactTabs__Tab--selected')).toBe(false);
+    expect(hasClassAt(tabsList, 1, 'ReactTabs__Tab--disabled')).toBe(false);
+
+    expect(hasClassAt(tabsList, 0, 'active')).toBe(true);
+    expect(hasClassAt(tabsList, 1, 'disabled')).toBe(true);
+  });
 });