Fix keyboard navigation when using menu dropdown with multiple option (#3122)

Author: jroofsf

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

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 });
 		}