fix(DismissableLayer): read properties of null (#1860)

Sewar-x · zernonia · web-flow · commit 44f0c0931d10 · 2025-05-05T23:34:29.000+08:00
* fix: Fix select and modal popup errors in wujie micro-frontend project

* chore: update conditional and better types

---------

Co-authored-by: zernonia &lt;zernonia@gmail.com&gt;
diff --git a/packages/core/src/DismissableLayer/utils.ts b/packages/core/src/DismissableLayer/utils.ts
@@ -16,7 +16,7 @@ export const FOCUS_OUTSIDE = 'dismissableLayer.focusOutside'
 function isLayerExist(layerElement: HTMLElement, targetElement: HTMLElement) {
   const targetLayer = targetElement.closest(
     '[data-dismissable-layer]',
-  ) as HTMLElement
+  )
 
   const mainLayer = layerElement.dataset.dismissableLayer === ''
     ? layerElement
@@ -27,10 +27,8 @@ function isLayerExist(layerElement: HTMLElement, targetElement: HTMLElement) {
   const nodeList = Array.from(
     layerElement.ownerDocument.querySelectorAll('[data-dismissable-layer]'),
   )
-  if (
-    (targetLayer
-      && mainLayer === targetLayer)
-    || nodeList.indexOf(mainLayer) < nodeList.indexOf(targetLayer)
+
+  if (targetLayer && (mainLayer === targetLayer || nodeList.indexOf(mainLayer) < nodeList.indexOf(targetLayer))
   ) {
     return true
   }
@@ -58,9 +56,9 @@ export function usePointerDownOutside(
     if (!isClient)
       return
     const handlePointerDown = async (event: PointerEvent) => {
-      const target = event.target as HTMLElement
+      const target = event.target as HTMLElement | undefined
 
-      if (!element?.value)
+      if (!element?.value || !target)
         return
 
       if (isLayerExist(element.value, target)) {
@@ -159,7 +157,8 @@ export function useFocusOutside(
 
       await nextTick()
       await nextTick()
-      if (!element.value || isLayerExist(element.value, event.target as HTMLElement))
+      const target = event.target as HTMLElement | undefined
+      if (!element.value || !target || isLayerExist(element.value, target))
         return
 
       if (event.target && !isFocusInsideDOMTree.value) {
