Merge pull request #131 from react-component/fix-keydown

fix: keyboard navigation not working after mounted
react-component · Apr 13, 2018 · 92e64ae · 92e64ae
2 parents 2f3f9b7 + 69e6067
commit 92e64ae
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 6 deletions.
diff --git a/src/SubMenu.jsx b/src/SubMenu.jsx
@@ -94,17 +94,20 @@ const SubMenu = createReactClass({
 
  componentDidMount() {
  this.componentDidUpdate();
- // invoke customized ref to expose component to mixin
- if (this.props.manualRef) {
- this.props.manualRef(this);
- }
  },
 
  componentDidUpdate() {
- const { mode, parentMenu } = this.props;
+ const { mode, parentMenu, manualRef } = this.props;
+
+ // invoke customized ref to expose component to mixin
+ if (manualRef) {
+ manualRef(this);
+ }
+
  if (mode !== 'horizontal' || !parentMenu.isRootMenu || !this.props.isOpen) {
  return;
  }
+
  this.minWidthTimeout = setTimeout(() => {
  if (!this.subMenuTitle || !this.menuInstance) {
  return;

diff --git a/tests/SubMenu.spec.js b/tests/SubMenu.spec.js
@@ -17,6 +17,9 @@ describe('SubMenu', () => {
  <Menu {...props}>
  <SubMenu key="s1" title="submenu1">
  <MenuItem key="s1-1">1</MenuItem>
+ <SubMenu key="s1-2" title="submenu1-1">
+ <MenuItem key="s1-2-1">2</MenuItem>
+ </SubMenu>
  </SubMenu>
  <SubMenu key="s2" title="submenu2">
  <MenuItem key="s2-2">2</MenuItem>
@@ -149,7 +152,6 @@ describe('SubMenu', () => {
  });
  });
 
-
  it('up & down key', () => {
  const wrapper = mount(createMenu());
  const titles = wrapper.find('.rc-menu-submenu-title');
@@ -162,6 +164,29 @@ describe('SubMenu', () => {
  titles.last().simulate('keyDown', { keyCode: KeyCode.UP });
  expect(wrapper.find('.rc-menu-submenu').first().is('.rc-menu-submenu-active')).toBe(true);
  });
+
+ it('combined key presses', () => {
+ const wrapper = mount(createMenu());
+ const titles = wrapper.find('.rc-menu-submenu-title');
+ const firstItem = titles.first();
+
+ // testing keydown event after submenu is closed and then opened again
+ firstItem.simulate('mouseEnter')
+ .simulate('keyDown', { keyCode: KeyCode.RIGHT })
+ .simulate('keyDown', { keyCode: KeyCode.LEFT })
+ .simulate('keyDown', { keyCode: KeyCode.RIGHT })
+ .simulate('keyDown', { keyCode: KeyCode.DOWN })
+ .simulate('keyDown', { keyCode: KeyCode.DOWN })
+ .simulate('keyDown', { keyCode: KeyCode.DOWN });
+
+ expect(
+ wrapper
+ .find('[title="submenu1-1"]')
+ .find('.rc-menu-submenu')
+ .first()
+ .is('.rc-menu-submenu-active')
+ ).toBe(true);
+ });
  });
 
  it('fires select event', () => {