fix(tab-bar): Arrow keys should focus adjacent tab #280
Conversation
Codecov Report
@@ Coverage Diff @@
## master #280 +/- ##
==========================================
+ Coverage 97.21% 97.29% +0.08%
==========================================
Files 33 33
Lines 1257 1258 +1
Branches 122 122
==========================================
+ Hits 1222 1224 +2
+ Misses 35 34 -1
Continue to review full report at Codecov.
|
packages/tab-bar/index.js
Outdated
| this.tabList_.forEach((tabList, index) => { | ||
| if (tabList.tabElement_.current === activeElement) { | ||
| return index; | ||
| for (let i = 0; i < this.tabList_.length; i++) { |
There was a problem hiding this comment.
This is what's causing #276, the forEach is returning undefined
There was a problem hiding this comment.
ahh gotcha - lets just leave a comment so no one changes it back to a forEach or something
test/unit/tab/index.test.js
Outdated
| @@ -305,3 +305,25 @@ test('#componentWillUnmount destroys foundation', () => { | |||
| wrapper.unmount(); | |||
| td.verify(foundation.destroy(), {times: 1}); | |||
| }); | |||
|
|
|||
| test('on focus event calls handleFocus on TabRipple', () => { | |||
| const wrapper = shallow(<Tab />); | |||
There was a problem hiding this comment.
It looks like you're trying to get the ref here...you can just use mount instead of shallow. Then these 3 lines can just be:
const wrapper = mount(<Tab />);
const ripple = wrapper.instance(). tabRipple_.current;
test/unit/tab/index.test.js
Outdated
| }); | ||
|
|
||
| test('on blur event calls handleBlur on TabRipple', () => { | ||
| const wrapper = shallow(<Tab />); |
packages/tab-bar/index.js
Outdated
| this.tabList_.forEach((tabList, index) => { | ||
| if (tabList.tabElement_.current === activeElement) { | ||
| return index; | ||
| for (let i = 0; i < this.tabList_.length; i++) { |
There was a problem hiding this comment.
ahh gotcha - lets just leave a comment so no one changes it back to a forEach or something
|
Good call 👍 |
Fixes #279 and #276