Rethink behavior on item click (#71)

* added tests to match functionality

* separated logical concerns into separate useEffect hooks

* Update src/use-dropdown-menu.ts

Co-Authored-By: Wes Cossick <WesCossick@users.noreply.github.com>

* fixed test and revised function

* rethought process for closing menu on click

* formatting

* demo formatting

* added a test for setIsOpen functionality

* version changed to 2.0.0

Co-authored-by: Wes Cossick <WesCossick@users.noreply.github.com>

Author: corymharper

demo/src/app.tsx

@@ -6,7 +6,7 @@ import useDropdownMenu from 'react-accessible-dropdown-menu-hook';
 // Functional component
 const App: React.FC = () => {
 	// Use the Hook
-	const [buttonProps, itemProps, isOpen] = useDropdownMenu(3);
+	const { buttonProps, itemProps, isOpen } = useDropdownMenu(3);
 
 	// Return JSX
 	return (

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-accessible-dropdown-menu-hook",
-	"version": "1.1.1",
+	"version": "2.0.0",
 	"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.ts

@@ -174,5 +174,5 @@ export default function useDropdownMenu(itemCount: number) {
 	}));
 
 	// Return a listener for the button, individual list items, and the state of the menu
-	return [buttonProps, itemProps, isOpen] as const;
+	return { buttonProps, itemProps, isOpen, setIsOpen } as const;
 }

test/puppeteer/demo.test.ts

@@ -96,7 +96,7 @@ it('reroutes enter presses on menu items as clicks', async () => {
 	await menuOpen();
 
 	// eslint-disable-next-line @typescript-eslint/no-misused-promises
-	page.on('dialog', async dialog => {
+	page.once('dialog', async dialog => {
 		alertAppeared = true;
 		await dialog.dismiss();
 	});

test/test-component.tsx

@@ -4,7 +4,7 @@ import useDropdownMenu from '../src/use-dropdown-menu';
 
 // A mock component for testing the Hook
 const TestComponent: React.FC = () => {
-	const [buttonProps, itemProps, isOpen] = useDropdownMenu(3);
+	const { buttonProps, itemProps, isOpen, setIsOpen } = useDropdownMenu(3);
 
 	return (
 		<React.Fragment>
@@ -13,7 +13,7 @@ const TestComponent: React.FC = () => {
 			</button>
 
 			<div role='menu' id='menu'>
-				<a {...itemProps[0]} onClick={() => null} id='menu-item-1'>
+				<a {...itemProps[0]} onClick={() => setIsOpen(false)} id='menu-item-1'>
 					Item 1
 				</a>
 

test/use-dropdown-menu.test.tsx

@@ -70,6 +70,20 @@ it('sets isOpen to true after pressing space while focused on the menu button',
 	expect(span.text()).toBe('true');
 });
 
+it('sets isOpen to false after clicking a menu item that calls the state change function', () => {
+	const component = mount(<TestComponent />);
+	const button = component.find('#menu-button');
+	const itemWithHandler = component.find('#menu-item-1');
+	const span = component.find('#is-open-indicator');
+
+	button.getDOMNode<HTMLButtonElement>().focus();
+	button.simulate('keydown', { key: 'Enter' });
+
+	itemWithHandler.simulate('click');
+
+	expect(span.text()).toBe('false');
+});
+
 it('moves the focus to the next element in the menu after pressing the down arrow', () => {
 	const component = mount(<TestComponent />);
 	const button = component.find('#menu-button');