fix(@clayui/drop-down): Fix Dropdown doesnt close when click outside

liferay · Dec 13, 2023 · 1a41500 · 1a41500
1 parent 1a86a66
commit 1a41500
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 7 deletions.
diff --git a/packages/clay-shared/src/Overlay.tsx b/packages/clay-shared/src/Overlay.tsx
@@ -112,14 +112,13 @@ export function Overlay({
 
 	useInteractOutside({
 		isDisabled: isOpen ? !isCloseOnInteractOutside : true,
-		onInteract: () => {
-			onHide('blur');
-		},
+		onInteract: () => {},
 		onInteractStart: (event) => {
 			if (overlayStack[overlayStack.length - 1] === menuRef && isModal) {
 				event.stopPropagation();
 				event.preventDefault();
 			}
+			onHide('blur');
 		},
 		ref: portalRef ?? menuRef,
 		triggerRef,

diff --git a/packages/clay-shared/src/useInteractOutside.tsx b/packages/clay-shared/src/useInteractOutside.tsx
@@ -40,7 +40,11 @@ export function useInteractOutside({
 		}
 
 		const onPointerDown = (event: Event) => {
-			if (isValidEvent(event, ref, triggerRef) && state.onInteract) {
+			if (
+				(isValidEvent(event, ref, triggerRef) ||
+					event.view === undefined) &&
+				state.onInteract
+			) {
 				if (onInteractStart) {
 					onInteractStart(event);
 				}
@@ -52,9 +56,10 @@ export function useInteractOutside({
 		if (typeof PointerEvent !== 'undefined') {
 			const onPointerUp = (event: Event) => {
 				if (
-					state.isPointerDown &&
-					state.onInteract &&
-					isValidEvent(event, ref, triggerRef)
+					(state.isPointerDown &&
+						state.onInteract &&
+						isValidEvent(event, ref, triggerRef)) ||
+					(event.type === 'blur' && event.view === undefined)
 				) {
 					state.isPointerDown = false;
 					state.onInteract(event);
@@ -63,6 +68,8 @@ export function useInteractOutside({
 
 			document.addEventListener('pointerdown', onPointerDown, true);
 			document.addEventListener('pointerup', onPointerUp, true);
+			window.addEventListener('blur', onPointerUp, true);
+			window.addEventListener('blur', onPointerDown, true);
 
 			return () => {
 				document.removeEventListener(
@@ -71,6 +78,8 @@ export function useInteractOutside({
 					true
 				);
 				document.removeEventListener('pointerup', onPointerUp, true);
+				window.removeEventListener('blur', onPointerUp, true);
+				window.removeEventListener('blur', onPointerDown, true);
 			};
 		} else {
 			const onMouseUp = (event: Event) => {