implemented new focus approach on click

Author: corymharper

src/use-dropdown-menu.test.tsx

@@ -95,16 +95,16 @@ it('Moves the focus to the first menu item after pressing space while focused on
 	expect(screen.getByText('1 Item')).toHaveFocus();
 });
 
-it('Moves the focus to the first menu item after clicking the menu to open it', async () => {
-	const { user } = setup(<TestComponent />);
+it('Moves the focus to the first menu item after clicking the menu to open it, if `focusFirstItemOnClick` is specified', async () => {
+	const { user } = setup(<TestComponent options={{ focusFirstItemOnClick: true }} />);
 
 	await user.click(screen.getByText('Primary'));
 
 	expect(screen.getByText('1 Item')).toHaveFocus();
 });
 
-it('Moves the focus to the first menu item after clicking the menu to open it, then pressing tab while focused on the menu button, if `disableFocusFirstItemOnClick` is specified', async () => {
-	const { user } = setup(<TestComponent options={{ disableFocusFirstItemOnClick: true }} />);
+it('Moves the focus to the first menu item after clicking the menu to open it, then pressing tab while focused on the menu button', async () => {
+	const { user } = setup(<TestComponent />);
 
 	await user.click(screen.getByText('Primary'));
 
@@ -115,8 +115,8 @@ it('Moves the focus to the first menu item after clicking the menu to open it, t
 	expect(screen.getByText('1 Item')).toHaveFocus();
 });
 
-it('Moves the focus to the first menu item after clicking the menu to open it, then pressing arrow down while focused on the menu button, if `disableFocusFirstItemOnClick` is specified', async () => {
-	const { user } = setup(<TestComponent options={{ disableFocusFirstItemOnClick: true }} />);
+it('Moves the focus to the first menu item after clicking the menu to open it, then pressing arrow down while focused on the menu button', async () => {
+	const { user } = setup(<TestComponent />);
 
 	await user.click(screen.getByText('Primary'));
 
@@ -308,6 +308,8 @@ it('Can navigate to a dynamically-added item', async () => {
 
 	await user.click(screen.getByText('Primary'));
 
+	await user.keyboard('{ArrowDown}');
+
 	for (let i = 0; i < 4; i += 1) {
 		await user.keyboard('{ArrowDown}');
 	}

src/use-dropdown-menu.ts

@@ -12,7 +12,7 @@ interface ButtonProps<ButtonElement extends HTMLElement>
 
 // A custom Hook that abstracts away the listeners/controls for dropdown menus
 export interface DropdownMenuOptions {
-	disableFocusFirstItemOnClick?: boolean;
+	focusFirstItemOnClick?: boolean;
 }
 
 interface DropdownMenuResponse<ButtonElement extends HTMLElement> {
@@ -64,7 +64,7 @@ export default function useDropdownMenu<ButtonElement extends HTMLElement = HTML
 		}
 
 		// If the menu is currently open focus on the first item in the menu
-		if (isOpen && !options?.disableFocusFirstItemOnClick) {
+		if (isOpen && (!clickedOpen.current || options?.focusFirstItemOnClick)) {
 			moveFocus(0);
 		} else if (!isOpen) {
 			clickedOpen.current = false;
@@ -159,7 +159,7 @@ export default function useDropdownMenu<ButtonElement extends HTMLElement = HTML
 				setIsOpen(false);
 			}
 		} else {
-			if (options?.disableFocusFirstItemOnClick) {
+			if (!options?.focusFirstItemOnClick) {
 				clickedOpen.current = !isOpen;
 			}
 

test-projects/browser/src/app.test.ts

@@ -35,11 +35,11 @@ it('Has the correct page title', async () => {
 	await expect(page.title()).resolves.toMatch('Browser');
 });
 
-it('Focuses the first menu item when menu button is clicked', async () => {
+it('Maintains focus when menu button is clicked', async () => {
 	await page.click('#menu-button');
 	await menuOpen();
 
-	expect(await currentFocusID()).toBe('menu-item-1');
+	expect(await currentFocusID()).toBe('menu-button');
 });
 
 it('Focuses on the menu button after pressing escape', async () => {