Merge pull request #282 from jaksenko/patch-1

Expose moveFocus()

Author: WesCossick

src/use-dropdown-menu.test.tsx

@@ -11,7 +11,7 @@ interface Props {
 
 const TestComponent: React.FC<Props> = ({ options }) => {
 	const [itemCount, setItemCount] = useState(4);
-	const { buttonProps, itemProps, isOpen, setIsOpen } = useDropdownMenu(itemCount, options);
+	const { buttonProps, itemProps, isOpen, moveFocus, setIsOpen } = useDropdownMenu(itemCount, options);
 
 	const clickHandlers: (() => void)[] = [(): void => console.log('Item one clicked'), (): void => setIsOpen(false)];
 
@@ -28,6 +28,7 @@ const TestComponent: React.FC<Props> = ({ options }) => {
 						key={i}
 						id={`menu-item-${i + 1}`}
 						onClick={clickHandlers[i]}
+						onMouseEnter={(): void => moveFocus(i)}
 						href={i > 1 ? 'https://example.com' : undefined}
 					>
 						{i + 1} Item
@@ -540,3 +541,23 @@ it('Moves the focus to the menu item with a label that starts with the correspon
 
 	expect(screen.getByText('3 Item')).toHaveFocus();
 });
+
+it('Moves the focus to the menu item currently hovered over by mouse', () => {
+	render(<TestComponent />);
+
+	userEvent.tab();
+
+	userEvent.type(screen.getByText('Primary'), '{enter}', {
+		skipClick: true,
+	});
+
+	fireEvent(
+		screen.getByText('3 Item'),
+		new MouseEvent('mouseover', {
+			bubbles: true,
+			cancelable: true,
+		})
+	);
+
+	expect(screen.getByText('3 Item')).toHaveFocus();
+});

src/use-dropdown-menu.ts

@@ -25,6 +25,7 @@ interface DropdownMenuResponse {
 	}[];
 	readonly isOpen: boolean;
 	readonly setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+	readonly moveFocus: (itemIndex: number) => void;
 }
 
 export default function useDropdownMenu(itemCount: number, options?: DropdownMenuOptions): DropdownMenuResponse {
@@ -233,5 +234,5 @@ export default function useDropdownMenu(itemCount: number, options?: DropdownMen
 	}));
 
 	// Return a listener for the button, individual list items, and the state of the menu
-	return { buttonProps, itemProps, isOpen, setIsOpen } as const;
+	return { buttonProps, itemProps, isOpen, setIsOpen, moveFocus } as const;
 }

website/docs/design/return-object.md

@@ -26,6 +26,7 @@ This Hook returns an object of the following shape:
     ];
     isOpen: boolean;
     setIsOpen: (newValue: boolean) => void;
+    moveFocus: (itemIndex: number) => void;
 }
 ```
 
@@ -44,3 +45,4 @@ This Hook returns an object of the following shape:
     - **ref:** A React ref applied to each menu item, used to manage focus.
 - **isOpen:** A boolean value indicating if the menu is open or closed. The developer should use this value to make the menu visible or not.
 - **setIsOpen:** A function useful for allowing the developer to programmatically open/close the menu.
+- **moveFocus:** A function that changes internal pointer of currently focused element. This is useful when you want to allow seamless switching between keyboard and mouse use.