From f2ab64abf0ce61776ce0a3f0b84c1655f167bff7 Mon Sep 17 00:00:00 2001 From: adamviktora Date: Tue, 12 Nov 2024 15:06:25 +0100 Subject: [PATCH] refactor(onToggleArrowKeydownDefault): don't use :has() selector --- .../react-core/src/helpers/KeyboardHandler.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/react-core/src/helpers/KeyboardHandler.tsx b/packages/react-core/src/helpers/KeyboardHandler.tsx index 53617fdbded..c777e3f2e8d 100644 --- a/packages/react-core/src/helpers/KeyboardHandler.tsx +++ b/packages/react-core/src/helpers/KeyboardHandler.tsx @@ -183,17 +183,17 @@ export const onToggleArrowKeydownDefault = (event: KeyboardEvent, menuRef: React event.preventDefault(); - const interactiveElementSelector = 'button:not(:disabled),input:not(:disabled),a:not([aria-disabled="true"])'; - const listItemSelector = `li:has(${interactiveElementSelector})`; - let listItem: Element; + const listItems = Array.from(menuRef.current?.querySelectorAll('li')); + const focusableElements = listItems + .map((li) => li.querySelector('button:not(:disabled),input:not(:disabled),a:not([aria-disabled="true"])')) + .filter((el) => el !== null); + + let focusableElement: Element; if (event.key === 'ArrowDown') { - listItem = menuRef.current?.querySelector(listItemSelector); + focusableElement = focusableElements[0]; } else { - const allItems = menuRef.current?.querySelectorAll(listItemSelector); - listItem = allItems ? allItems[allItems.length - 1] : null; + focusableElement = focusableElements[focusableElements.length - 1]; } - - const focusableElement = listItem?.querySelector(interactiveElementSelector); focusableElement && (focusableElement as HTMLElement).focus(); };