fix(tab-bar): Arrow keys should focus adjacent tab (#280)

Author: bonniezhou

packages/tab-bar/index.js

@@ -63,11 +63,14 @@ export default class TabBar extends Component {
       getPreviousActiveTabIndex: () => this.state.previousActiveIndex,
       getFocusedTabIndex: () => {
         const activeElement = document.activeElement;
-        this.tabList_.forEach((tabList, index) => {
-          if (tabList.tabElement_.current === activeElement) {
-            return index;
+        // cannot use findIndex, not supported in IE11
+        // cannot use forEach, return statement inside the forEach loop will not return
+        for (let i = 0; i < this.tabList_.length; i++) {
+          if (this.tabList_[i].tabElement_.current === activeElement) {
+            return i;
           }
-        });
+        }
+        return -1;
       },
       getIndexOfTab: (tabToFind) => this.tabList_.indexOf(tabToFind),
       getTabListLength: () => this.tabList_.length,

packages/tab/TabRipple.js

@@ -27,10 +27,6 @@ import withRipple from '@material/react-ripple';
 
 export class TabRipple extends React.Component {
 
-  init = (el) => {
-    this.props.initRipple(el);
-  }
-
   get classes() {
     return classnames('mdc-tab__ripple', this.props.className);
   }

packages/tab/index.js

@@ -34,6 +34,7 @@ export default class Tab extends Component {
   tabElement_ = React.createRef();
   tabContentElement_ = React.createRef();
   tabIndicator_ = React.createRef();
+  tabRipple_ = React.createRef();
 
   state = {
     'classList': new Set(),
@@ -153,6 +154,8 @@ export default class Tab extends Component {
         role='tab'
         aria-selected={ariaSelected}
         tabIndex={tabIndex}
+        onFocus={(e) => this.tabRipple_.current.handleFocus(e)}
+        onBlur={(e) => this.tabRipple_.current.handleBlur(e)}
         ref={this.tabElement_}
         {...otherProps}
       >
@@ -164,7 +167,7 @@ export default class Tab extends Component {
           {isMinWidthIndicator ? this.renderIndicator() : null}
         </span>
         {isMinWidthIndicator ? null : this.renderIndicator()}
-        <TabRipple />
+        <TabRipple ref={this.tabRipple_} />
       </button>
     );
   }

test/unit/tab/index.test.js

@@ -305,3 +305,21 @@ test('#componentWillUnmount destroys foundation', () => {
   wrapper.unmount();
   td.verify(foundation.destroy(), {times: 1});
 });
+
+test('on focus event calls handleFocus on TabRipple', () => {
+  const wrapper = mount(<Tab />);
+  const ripple = wrapper.instance().tabRipple_.current;
+  ripple.handleFocus = td.func();
+
+  wrapper.simulate('focus');
+  td.verify(ripple.handleFocus(td.matchers.isA(Object)), {times: 1});
+});
+
+test('on blur event calls handleBlur on TabRipple', () => {
+  const wrapper = mount(<Tab />);
+  const ripple = wrapper.instance().tabRipple_.current;
+  ripple.handleBlur = td.func();
+
+  wrapper.simulate('blur');
+  td.verify(ripple.handleBlur(td.matchers.isA(Object)), {times: 1});
+});