From 7c9a58355d2dababba3ea3438bd9b33078a7bff2 Mon Sep 17 00:00:00 2001 From: Wes Cossick Date: Wed, 25 Nov 2020 16:13:18 -0600 Subject: [PATCH 1/3] Add event listener asynchronously to fix portal bug in React v17 https://github.com/facebook/react/issues/20074 --- src/use-dropdown-menu.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/use-dropdown-menu.ts b/src/use-dropdown-menu.ts index 31c63df..54713b9 100644 --- a/src/use-dropdown-menu.ts +++ b/src/use-dropdown-menu.ts @@ -80,7 +80,10 @@ export default function useDropdownMenu(itemCount: number) { }; // Add listener - document.addEventListener('click', handleEveryClick); + // -> Force it to be async to fix: https://github.com/facebook/react/issues/20074 + setTimeout(() => { + document.addEventListener('click', handleEveryClick); + }, 1); // Return function to remove listener return () => document.removeEventListener('click', handleEveryClick); From d2b90459cc1fcb2650c51b264bf438978f86d895 Mon Sep 17 00:00:00 2001 From: Wes Cossick Date: Wed, 25 Nov 2020 16:13:36 -0600 Subject: [PATCH 2/3] Only add event listener if menu is open --- src/use-dropdown-menu.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/use-dropdown-menu.ts b/src/use-dropdown-menu.ts index 54713b9..6eabc20 100644 --- a/src/use-dropdown-menu.ts +++ b/src/use-dropdown-menu.ts @@ -55,13 +55,13 @@ export default function useDropdownMenu(itemCount: number) { // Handle listening for clicks and auto-hiding the menu useEffect(() => { + // Ignore if the menu isn't open + if (!isOpen) { + return; + } + // This function is designed to handle every click const handleEveryClick = (event: MouseEvent) => { - // Ignore if the menu isn't open - if (!isOpen) { - return; - } - // Make this happen asynchronously setTimeout(() => { // Type guard From b272c46150883f53c11c8087b819e849c5f62348 Mon Sep 17 00:00:00 2001 From: Wes Cossick Date: Wed, 25 Nov 2020 16:20:03 -0600 Subject: [PATCH 3/3] Bump patch version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 98bb090..9df4301 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-accessible-dropdown-menu-hook", - "version": "2.1.1", + "version": "2.1.2", "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",