Fix keyboard navigation when using menu dropdown with multiple option (…

…#3122)
salesforce · Jul 3, 2023 · 549b006 · 549b006
1 parent d55aeeb
commit 549b006
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/components/menu-dropdown/__tests__/dropdown.browser-test.jsx b/components/menu-dropdown/__tests__/dropdown.browser-test.jsx
@@ -394,6 +394,21 @@ describe('SLDSMenuDropdown', function () {
  );
  expect(firstNode).attr('role', 'menuitemcheckbox');
  });
+
+ it('moves focus to next item after keyboard selection', function () {
+ const nodes = getNodes({ wrapper: this.wrapper });
+ nodes.trigger.simulate('click', {});
+ const openNodes = getNodes({ wrapper: this.wrapper });
+ openNodes.menu.simulate('keyDown', keyObjects.DOWN);
+ openNodes.menu.simulate('keyDown', keyObjects.ENTER);
+ openNodes.menu.simulate('keyDown', keyObjects.DOWN);
+ openNodes.menu.simulate('keyDown', keyObjects.ENTER);
+
+ const secondNode = openNodes.menu.find('.slds-dropdown__item a').at(1);
+ expect(secondNode.getDOMNode().getAttribute('aria-checked')).to.not.equal(
+ 'true'
+ );
+ });
  });
 
  // Hover and hybrid hover UX patterns are not approved UX patterns due to accessibility concerns

diff --git a/components/menu-dropdown/menu-dropdown.jsx b/components/menu-dropdown/menu-dropdown.jsx
@@ -806,7 +806,10 @@ class MenuDropdown extends React.Component {
 
  // This is a bit of an anti-pattern, but it has the upside of being a nice default. Component authors can always override to only set state and do their own focusing in their subcomponents.
  handleKeyboardFocus = (focusedIndex) => {
- if (this.state.focusedIndex !== focusedIndex) {
+ if (
+ this.state.focusedIndex !== focusedIndex &&
+ focusedIndex !== undefined
+ ) {
  this.setState({ focusedIndex });
  }