From 31f293aef5b577cb59bd1067c609ec62635405f5 Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Mon, 4 Mar 2024 13:34:03 -0500 Subject: [PATCH 1/2] fix(select): focus first item when opened by click --- packages/react-core/src/components/Select/Select.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-core/src/components/Select/Select.tsx b/packages/react-core/src/components/Select/Select.tsx index e5bf254ca4d..4a46ab93b12 100644 --- a/packages/react-core/src/components/Select/Select.tsx +++ b/packages/react-core/src/components/Select/Select.tsx @@ -124,8 +124,8 @@ const SelectBase: React.FunctionComponent = ({ }; const handleClick = (event: MouseEvent) => { - // toggle was clicked open via keyboard, focus on first menu item - if (isOpen && toggleRef.current?.contains(event.target as Node) && event.detail === 0) { + // toggle was opened, focus on first menu item + if (isOpen && toggleRef.current?.contains(event.target as Node)) { setTimeout(() => { const firstElement = menuRef?.current?.querySelector('li button:not(:disabled),li input:not(:disabled)'); firstElement && (firstElement as HTMLElement).focus(); From 8f2127ca58a29e8480ca3ffb121fbed542cdea4c Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Tue, 5 Mar 2024 09:19:28 -0500 Subject: [PATCH 2/2] fix(dropdown/menu/pagination): Update to focus first item on click --- packages/react-core/src/components/Dropdown/Dropdown.tsx | 4 ++-- packages/react-core/src/components/Menu/MenuContainer.tsx | 4 ++-- .../src/components/Pagination/PaginationOptionsMenu.tsx | 6 ++---- 3 files changed, 6 insertions(+), 8 deletions(-) diff --git a/packages/react-core/src/components/Dropdown/Dropdown.tsx b/packages/react-core/src/components/Dropdown/Dropdown.tsx index a35ad8b4b4d..92c513c7815 100644 --- a/packages/react-core/src/components/Dropdown/Dropdown.tsx +++ b/packages/react-core/src/components/Dropdown/Dropdown.tsx @@ -111,8 +111,8 @@ const DropdownBase: React.FunctionComponent = ({ }; const handleClick = (event: MouseEvent) => { - // toggle was clicked open via keyboard, focus on first menu item - if (isOpen && toggleRef.current?.contains(event.target as Node) && event.detail === 0) { + // toggle was opened, focus on first menu item + if (isOpen && toggleRef.current?.contains(event.target as Node)) { setTimeout(() => { const firstElement = menuRef?.current?.querySelector( 'li button:not(:disabled),li input:not(:disabled),li a:not([aria-disabled="true"])' diff --git a/packages/react-core/src/components/Menu/MenuContainer.tsx b/packages/react-core/src/components/Menu/MenuContainer.tsx index 027201f688b..6208fb02222 100644 --- a/packages/react-core/src/components/Menu/MenuContainer.tsx +++ b/packages/react-core/src/components/Menu/MenuContainer.tsx @@ -69,8 +69,8 @@ export const MenuContainer: React.FunctionComponent = ({ }; const handleClick = (event: MouseEvent) => { - // toggle was clicked open via keyboard, focus on first menu item - if (isOpen && toggleRef.current?.contains(event.target as Node) && event.detail === 0) { + // toggle was opened, focus on first menu item + if (isOpen && toggleRef.current?.contains(event.target as Node)) { setTimeout(() => { const firstElement = menuRef?.current?.querySelector( 'li button:not(:disabled),li input:not(:disabled),li a:not([aria-disabled="true"])' diff --git a/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx b/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx index 8d8f624f98e..a3d400773c5 100644 --- a/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx +++ b/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx @@ -124,10 +124,8 @@ export const PaginationOptionsMenu: React.FunctionComponent { - // If the event is on the toggle and was fired via keyboard 'click', focus the first - // non-disabled menu item - // https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail - if (event.detail === 0 && isOpen && toggleRef.current?.contains(event.target as Node)) { + // Focus the first non-disabled menu item on toggle 'click' + if (isOpen && toggleRef.current?.contains(event.target as Node)) { setTimeout(() => { const firstElement = menuRef?.current?.querySelector('li button:not(:disabled)'); firstElement && (firstElement as HTMLElement).focus();