Merge pull request #277 from sparksuite/close-menu-on-escape

Close menu when the escape key is pressed while menu button holds focus

Author: WesCossick

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-accessible-dropdown-menu-hook",
-	"version": "2.3.0",
+	"version": "2.3.1",
 	"description": "A simple Hook for creating fully accessible dropdown menus in React",
 	"main": "dist/use-dropdown-menu.js",
 	"types": "dist/use-dropdown-menu.d.ts",

src/use-dropdown-menu.test.tsx

@@ -126,6 +126,18 @@ it('Sets isOpen to true after pressing enter while focused on the menu button',
 	expect(screen.getByTestId('is-open-indicator')).toHaveTextContent('true');
 });
 
+it('Sets isOpen to false after pressing escape while focused on the menu button', () => {
+	render(<TestComponent />);
+
+	userEvent.click(screen.getByText('Primary'));
+
+	userEvent.type(screen.getByText('Primary'), '{esc}', {
+		skipClick: true,
+	});
+
+	expect(screen.getByTestId('is-open-indicator')).toHaveTextContent('false');
+});
+
 it('Sets isOpen to true after pressing space while focused on the menu button', () => {
 	render(<TestComponent />);
 

src/use-dropdown-menu.ts

@@ -118,17 +118,24 @@ export default function useDropdownMenu(itemCount: number): DropdownMenuResponse
 		if (isKeyboardEvent(e)) {
 			const { key } = e;
 
-			if (!['Enter', ' ', 'Tab', 'ArrowDown'].includes(key)) {
+			if (!['Enter', ' ', 'Tab', 'ArrowDown', 'Escape'].includes(key)) {
 				return;
 			}
 
 			if ((key === 'Tab' || key === 'ArrowDown') && clickedOpen.current && isOpen) {
 				e.preventDefault();
 				moveFocus(0);
-			} else if (key !== 'Tab') {
+			}
+
+			if (key === 'Enter' || key === ' ') {
 				e.preventDefault();
 				setIsOpen(true);
 			}
+
+			if (key === 'Escape') {
+				e.preventDefault();
+				setIsOpen(false);
+			}
 		} else {
 			clickedOpen.current = !isOpen;
 			setIsOpen(!isOpen);

website/src/pages/demo.tsx

@@ -70,6 +70,7 @@ const Demo: React.FC = () => {
 										If the menu is revealed with the mouse, the first menu item can be focused by pressing tab / arrow
 										down
 									</li>
+									<li>If the menu is revealed with the mouse, the menu can be be closed by pressing escape</li>
 									<li>
 										<em>Once focus is in the menu…</em>