Merge pull request #5858 from matuzalemsteles/drop-down-inert

fix(@clayui/drop-down): fixes bug with chrome blocking element focus when clicking outside the menu
liferay · Aug 20, 2024 · 12a89bb · 12a89bb
2 parents 164e1fa + d2610ef
commit 12a89bb
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 34 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/__tests__/__snapshots__/DropDownWithDrilldown.tsx.snap b/packages/clay-drop-down/src/__tests__/__snapshots__/DropDownWithDrilldown.tsx.snap
@@ -2,10 +2,7 @@
 
 exports[`ClayDropDownWithDrilldown renders 1`] = `
 <body>
-  <div
-    aria-hidden="true"
-    data-aria-hidden="true"
-  >
+  <div>
     <div
       class="dropdown"
     >
@@ -216,10 +213,7 @@ exports[`ClayDropDownWithDrilldown renders 1`] = `
 
 exports[`ClayDropDownWithDrilldown renders dividers 1`] = `
 <body>
-  <div
-    aria-hidden="true"
-    data-aria-hidden="true"
-  >
+  <div>
     <div
       class="dropdown"
     >

diff --git a/packages/clay-drop-down/src/__tests__/__snapshots__/index.tsx.snap b/packages/clay-drop-down/src/__tests__/__snapshots__/index.tsx.snap
@@ -2,10 +2,7 @@
 
 exports[`ClayDropDown renders dropdown menu when clicked 1`] = `
 <body>
-  <div
-    aria-hidden="true"
-    data-aria-hidden="true"
-  >
+  <div>
     <div
       class="dropdown"
     >
@@ -77,10 +74,7 @@ exports[`ClayDropDown renders dropdown menu when clicked 1`] = `
 
 exports[`ClayDropDown renders with groups 1`] = `
 <body>
-  <div
-    aria-hidden="true"
-    data-aria-hidden="true"
-  >
+  <div>
     <div
       class="dropdown"
     >
@@ -224,10 +218,7 @@ exports[`ClayDropDown renders with groups 1`] = `
 
 exports[`ClayDropDown renders with icons 1`] = `
 <body>
-  <div
-    aria-hidden="true"
-    data-aria-hidden="true"
-  >
+  <div>
     <div
       class="dropdown"
     >
@@ -344,10 +335,7 @@ exports[`ClayDropDown renders with icons 1`] = `
 
 exports[`ClayDropDown renders with search input 1`] = `
 <body>
-  <div
-    aria-hidden="true"
-    data-aria-hidden="true"
-  >
+  <div>
     <div
       class="dropdown"
     >

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,
@@ -116,6 +118,11 @@ export function Overlay({
 			onHide('blur');
 		},
 		onInteractStart: (event) => {
+			if (unsuppressCallbackRef.current) {
+				unsuppressCallbackRef.current();
+				unsuppressCallbackRef.current = null;
+			}
+
 			if (overlayStack[overlayStack.length - 1] === menuRef && isModal) {
 				event.stopPropagation();
 				event.preventDefault();
@@ -148,20 +155,20 @@ 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 () => {
-					if (unsuppressCallbackRef.current) {
-						unsuppressCallbackRef.current();
-					}
-					unsuppressCallbackRef.current = null;
-				};
 			} else {
-				return hideOthers(elements);
+				unsuppressCallbackRef.current = hideOthers(elements);
 			}
+
+			return () => {
+				if (unsuppressCallbackRef.current) {
+					unsuppressCallbackRef.current();
+				}
+				unsuppressCallbackRef.current = null;
+			};
 		}
-	}, [isModal, isOpen]);
+	}, [isModal, inert, isOpen]);
 
 	return (
 		<ClayPortal className={menuClassName} subPortalRef={portalRef}>