Merge pull request #50 from sparksuite/enter-close-menu

Ensure enter key closes the menu

Author: WesCossick

demo/src/app.tsx

@@ -48,7 +48,10 @@ const App: React.FC = () => {
 						<li>The up / down arrow keys allow for navigation through the menu items</li>
 						<li>Pressing tab will close the menu and move the focus to the next focusable element</li>
 						<li>Pressing escape will close the menu and return the focus to the button</li>
-						<li>Pressing enter will trigger that item (whether itʼs a link or has a click handler attached)</li>
+						<li>
+							Pressing enter will activate that item and close the menu (whether itʼs a link or has a click handler
+							attached)
+						</li>
 					</ul>
 				</li>
 			</ul>

src/use-dropdown-menu.ts

@@ -112,8 +112,12 @@ export default function useDropdownMenu(itemCount: number) {
 		} else if (key === 'Tab') {
 			setIsOpen(false);
 			return;
-		} else if (key === 'Enter' && !e.currentTarget.href) {
-			e.currentTarget.click();
+		} else if (key === 'Enter') {
+			if (!e.currentTarget.href) {
+				e.currentTarget.click();
+			}
+
+			setIsOpen(false);
 			return;
 		}
 

test/puppeteer/demo.test.ts

@@ -83,3 +83,21 @@ it('leaves the menu open if you click inside of it', async () => {
 
 	expect(true).toBe(true);
 });
+
+it('reroutes enter presses on menu items as clicks', async () => {
+	let alertAppeared = false;
+
+	await page.click('#menu-button');
+	await menuOpen();
+
+	// eslint-disable-next-line @typescript-eslint/no-misused-promises
+	page.on('dialog', async dialog => {
+		alertAppeared = true;
+		await dialog.dismiss();
+	});
+
+	await page.focus('#menu-item-3');
+	await keyboard.down('Enter');
+
+	expect(alertAppeared).toBe(true);
+});

test/test-component.tsx

@@ -8,27 +8,25 @@ const TestComponent: React.FC = () => {
 
 	return (
 		<React.Fragment>
-			<button type='button' {...buttonProps} id='menu-button' tabIndex={0}>
+			<button {...buttonProps} id='menu-button'>
 				Primary
 			</button>
 
-			<div style={{ display: isOpen ? 'block' : 'none' }} role='menu' id='menu'>
-				<a style={{ display: 'block' }} {...itemProps[0]} onClick={() => null} id='menu-item-1'>
+			<div role='menu' id='menu'>
+				<a {...itemProps[0]} onClick={() => null} id='menu-item-1'>
 					Item 1
 				</a>
 
-				<a style={{ display: 'block' }} href='https://example.com' {...itemProps[1]} id='menu-item-2'>
+				<a {...itemProps[1]} href='https://example.com' id='menu-item-2'>
 					Item 2
 				</a>
 
-				<a style={{ display: 'block' }} href='https://example.com' {...itemProps[2]} id='menu-item-3'>
+				<a {...itemProps[2]} href='https://example.com' id='menu-item-3'>
 					Item 3
 				</a>
 			</div>
 
-			<button type='button' id='second-button' tabIndex={0}>
-				Another Button
-			</button>
+			<button id='second-button'>Another Button</button>
 
 			<span id='is-open-indicator'>{isOpen ? 'true' : 'false'}</span>
 		</React.Fragment>