Disable scroll when menu has been opened (#177)

Author: corymharper

package.json

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

@@ -86,6 +86,19 @@ export default function useDropdownMenu(itemCount: number) {
 		return () => document.removeEventListener('click', handleEveryClick);
 	}, [isOpen]);
 
+	// Disable scroll when the menu is opened, and revert back when the menu is closed
+	useEffect(() => {
+		const disableArrowScroll = (event: KeyboardEvent) => {
+			if (isOpen && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+				event.preventDefault();
+			}
+		};
+
+		document.addEventListener('keydown', disableArrowScroll);
+
+		return () => document.removeEventListener('keydown', disableArrowScroll);
+	}, [isOpen]);
+
 	// Create a handler function for the button's clicks and keyboard events
 	const buttonListener = (e: React.KeyboardEvent | React.MouseEvent) => {
 		// Detect if event was a keyboard event or a mouse event

test/puppeteer/demo.test.ts

@@ -48,6 +48,33 @@ it('focuses on the menu button after pressing escape', async () => {
 	expect(await currentFocusID()).toBe('menu-button');
 });
 
+it('disables scroll by arrow key when menu is open', async () => {
+	await page.setViewport({
+		width: 1000,
+		height: 500,
+	});
+
+	await page.click('#menu-button');
+	await menuOpen();
+
+	const currentScrollY = await page.evaluate(() => window.scrollY);
+	await page.keyboard.down('ArrowDown');
+	await sleep(1000); // Give page time to scroll
+	expect(await page.evaluate(() => window.scrollY)).toBe(currentScrollY);
+});
+
+it('does not disable scroll by arrow key when menu is closed', async () => {
+	await page.setViewport({
+		width: 1000,
+		height: 500,
+	});
+
+	const currentScrollY = await page.evaluate(() => window.scrollY);
+	await page.keyboard.press('ArrowDown');
+	await sleep(1000); // Give page time to scroll
+	expect(await page.evaluate(() => window.scrollY)).toBeGreaterThan(currentScrollY);
+});
+
 it('focuses on the next item in the tab order after pressing tab', async () => {
 	await page.focus('#menu-button');
 	await page.keyboard.down('Enter');