fix(@clayui/drop-down): fixes bug with chrome blocking element focus …

…when clicking outside the menu
liferay · Aug 14, 2024 · 9a99238 · 9a99238
1 parent 3b6a49e
commit 9a99238
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git a/packages/clay-drop-down/src/DropDown.tsx b/packages/clay-drop-down/src/DropDown.tsx
@@ -326,6 +326,7 @@ function ClayDropDown<T>({
 						navigationProps.onKeyDown(event);
 					}}
 					ref={menuElementRef}
+					suppress={[triggerElementRef, menuElementRef]}
 					triggerRef={triggerElementRef}
 					width={menuWidth}
 				>

diff --git a/packages/clay-drop-down/src/Menu.tsx b/packages/clay-drop-down/src/Menu.tsx
@@ -200,6 +200,7 @@ const Menu = React.forwardRef<HTMLDivElement, IProps>(
 
 		return (
 			<Overlay
+				inert
 				isCloseOnInteractOutside={closeOnClickOutside}
 				isKeyboardDismiss
 				isModal={lock}

diff --git a/packages/clay-shared/src/Overlay.tsx b/packages/clay-shared/src/Overlay.tsx
@@ -14,6 +14,7 @@ import type {Undo} from 'aria-hidden';
 
 type Props = {
 	children: React.ReactElement;
+	inert?: boolean;
 	isCloseOnInteractOutside?: boolean;
 	isKeyboardDismiss?: boolean;
 	isModal?: boolean;
@@ -35,6 +36,7 @@ const overlayStack: Array<React.RefObject<Element>> = [];
  */
 export function Overlay({
 	children,
+	inert,
 	isCloseOnInteractOutside = false,
 	isKeyboardDismiss = false,
 	isModal = false,
@@ -148,7 +150,7 @@ export function Overlay({
 			// Inert is a new native feature to better handle DOM arias that are not
 			// assertive to a SR or that should ignore any user interaction.
 			// https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert
-			if (isModal && supportsInert()) {
+			if ((isModal || inert) && supportsInert()) {
 				unsuppressCallbackRef.current = suppressOthers(elements);
 
 				return () => {
@@ -161,7 +163,7 @@ export function Overlay({
 				return hideOthers(elements);
 			}
 		}
-	}, [isModal, isOpen]);
+	}, [isModal, inert, isOpen]);
 
 	return (
 		<ClayPortal className={menuClassName} subPortalRef={portalRef}>