fix(cdk:popper): popper shouldn't update if reference is display none (…

…#1653)
IDuxFE · Aug 14, 2023 · cf83513 · cf83513
1 parent 4ac4c5e
commit cf83513
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/packages/cdk/popper/src/middlewares/arrow.ts b/packages/cdk/popper/src/middlewares/arrow.ts
@@ -14,11 +14,17 @@ export function arrow(arrowElement: HTMLElement): Middleware {
     ...rest,
     name: 'IDUX_arrow',
     async fn(middlewareArguments) {
+      const { reference } = middlewareArguments.elements
+
+      if (!(reference instanceof HTMLElement) || getComputedStyle(reference).display === 'none') {
+        return middlewareArguments
+      }
+
       const res = (await arrowFn(middlewareArguments)) as { data: { x: number; y: number; centerOffset: number } }
+
       const {
         data: { x, y },
       } = res
-
       Object.assign(arrowElement.style, {
         left: x != null ? `${x}px` : '',
         top: y != null ? `${y}px` : '',

diff --git a/packages/cdk/popper/src/middlewares/refenceHidden.ts b/packages/cdk/popper/src/middlewares/refenceHidden.ts
@@ -68,7 +68,7 @@ function checkParentsVisible(el: ReferenceElement): boolean {
 
   let parent = el.parentElement
   while (parent) {
-    if (!isVisibleElement(parent)) {
+    if (getComputedStyle(parent).display !== 'contents' && !isVisibleElement(parent)) {
       return false
     }
 

diff --git a/packages/cdk/popper/src/middlewares/updatePlacement.ts b/packages/cdk/popper/src/middlewares/updatePlacement.ts
@@ -16,11 +16,14 @@ export function updatePlacement(updatePlacement: (value: PopperPlacement) => voi
     fn(middlewareArguments) {
       const {
         placement,
-        elements: { floating },
+        elements: { floating, reference },
       } = middlewareArguments
-      updatePlacement(camelCase(placement) as PopperPlacement)
 
-      floating.setAttribute('data-popper-placement', placement)
+      if (reference instanceof HTMLElement && getComputedStyle(reference).display !== 'none') {
+        updatePlacement(camelCase(placement) as PopperPlacement)
+        floating.setAttribute('data-popper-placement', placement)
+      }
+
       return middlewareArguments
     },
   }