From ea7a764b57e8d6fbeb86880babb072c06d41efc5 Mon Sep 17 00:00:00 2001
From: Wes Cossick <wes@sparksuite.com>
Date: Thu, 19 Dec 2019 14:06:41 -0600
Subject: [PATCH 1/6] Ensure enter key closes the menu

---
 src/use-dropdown-menu.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/use-dropdown-menu.ts b/src/use-dropdown-menu.ts
index f58c2d8..ebf43d9 100644
--- a/src/use-dropdown-menu.ts
+++ b/src/use-dropdown-menu.ts
@@ -82,8 +82,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;
 		}
 

From b8586130e5bbe602aab9d775500e037b12e64fb4 Mon Sep 17 00:00:00 2001
From: Wes Cossick <wes@sparksuite.com>
Date: Thu, 19 Dec 2019 14:50:35 -0600
Subject: [PATCH 2/6] Tweak the wording of the behavior

---
 demo/src/app.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/demo/src/app.tsx b/demo/src/app.tsx
index f9cb191..b6c7c7d 100644
--- a/demo/src/app.tsx
+++ b/demo/src/app.tsx
@@ -48,7 +48,7 @@ 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>

From 2474e32ce236b1008109ee3e83bfb9984ad5b900 Mon Sep 17 00:00:00 2001
From: Wes Cossick <wes@sparksuite.com>
Date: Thu, 19 Dec 2019 15:05:50 -0600
Subject: [PATCH 3/6] Strip out unnecessary code from test component

---
 test/test-component.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/test/test-component.tsx b/test/test-component.tsx
index 8818b2a..ab8f795 100644
--- a/test/test-component.tsx
+++ b/test/test-component.tsx
@@ -1,5 +1,5 @@
 // Imports
-import React from 'react';
+import React, { useState } from 'react';
 import useDropdownMenu from '../src/use-dropdown-menu';
 
 // A mock component for testing the Hook
@@ -8,25 +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}>
+			<button id='second-button'>
 				Another Button
 			</button>
 

From 5c89567251d2e5ef38cd1458bb4cb0b491e62fa1 Mon Sep 17 00:00:00 2001
From: Wes Cossick <wes@sparksuite.com>
Date: Thu, 19 Dec 2019 15:05:58 -0600
Subject: [PATCH 4/6] Add test for rerouting enters to clicks

---
 test/puppeteer/demo.test.ts | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/test/puppeteer/demo.test.ts b/test/puppeteer/demo.test.ts
index f39089f..85f3581 100644
--- a/test/puppeteer/demo.test.ts
+++ b/test/puppeteer/demo.test.ts
@@ -83,3 +83,20 @@ 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();
+
+	page.on('dialog', async dialog => {
+		alertAppeared = true;
+		await dialog.dismiss();
+	});
+
+	await page.focus('#menu-item-3');
+	await keyboard.down('Enter');
+
+	expect(alertAppeared).toBe(true);
+});

From 098fbe4837a9b5041ad3a586c0416730ad4d1163 Mon Sep 17 00:00:00 2001
From: Wes Cossick <wes@sparksuite.com>
Date: Thu, 19 Dec 2019 15:10:20 -0600
Subject: [PATCH 5/6] Format the code

---
 test/puppeteer/demo.test.ts | 1 +
 test/test-component.tsx     | 6 ++----
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/test/puppeteer/demo.test.ts b/test/puppeteer/demo.test.ts
index 85f3581..e736575 100644
--- a/test/puppeteer/demo.test.ts
+++ b/test/puppeteer/demo.test.ts
@@ -90,6 +90,7 @@ it('reroutes enter presses on menu items as clicks', async () => {
 	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();
diff --git a/test/test-component.tsx b/test/test-component.tsx
index ab8f795..2592fff 100644
--- a/test/test-component.tsx
+++ b/test/test-component.tsx
@@ -1,5 +1,5 @@
 // Imports
-import React, { useState } from 'react';
+import React from 'react';
 import useDropdownMenu from '../src/use-dropdown-menu';
 
 // A mock component for testing the Hook
@@ -26,9 +26,7 @@ const TestComponent: React.FC = () => {
 				</a>
 			</div>
 
-			<button id='second-button'>
-				Another Button
-			</button>
+			<button id='second-button'>Another Button</button>
 
 			<span id='is-open-indicator'>{isOpen ? 'true' : 'false'}</span>
 		</React.Fragment>

From de75478e24dc7183bcf59ffb6697c985723d3bb5 Mon Sep 17 00:00:00 2001
From: Wes Cossick <wes@sparksuite.com>
Date: Thu, 19 Dec 2019 15:14:34 -0600
Subject: [PATCH 6/6] Format the code

---
 demo/src/app.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/demo/src/app.tsx b/demo/src/app.tsx
index b6c7c7d..ac4085a 100644
--- a/demo/src/app.tsx
+++ b/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 activate that item and close the menu (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>