fix(cdk:popper): reference is hidden when ancestors are not visible (#…

…1648)
IDuxFE · Aug 11, 2023 · db00adb · db00adb
1 parent e6f5fa2
commit db00adb
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 20 deletions.
diff --git a/packages/cdk/popper/__tests__/__snapshots__/popper.spec.ts.snap b/packages/cdk/popper/__tests__/__snapshots__/popper.spec.ts.snap
@@ -12,70 +12,70 @@ exports[`usePopper > options > autoAdjust work 2`] = `
 
 exports[`usePopper > options > offset work 1`] = `
 "<div id=\\"trigger\\">Trigger</div>
-<div id=\\"overlay\\" style=\\"position: absolute; left: 4px; top: -4px;\\" data-popper-placement=\\"top\\">Popper</div>"
+<div id=\\"overlay\\" style=\\"position: absolute; left: 0px; top: 0px;\\" data-popper-reference-hidden=\\"\\" data-popper-placement=\\"top\\">Popper</div>"
 `;
 
 exports[`usePopper > options > offset work 2`] = `
 "<div id=\\"trigger\\">Trigger</div>
-<div id=\\"overlay\\" style=\\"position: absolute; left: 8px; top: -8px;\\" data-popper-placement=\\"top\\">Popper</div>"
+<div id=\\"overlay\\" style=\\"position: absolute; left: 0px; top: 0px;\\" data-popper-reference-hidden=\\"\\" data-popper-placement=\\"top\\">Popper</div>"
 `;
 
 exports[`usePopper > options > placement work 1`] = `
 "<div id=\\"trigger\\">Trigger</div>
-<div id=\\"overlay\\" style=\\"position: absolute; left: 0px; top: 0px;\\" data-popper-placement=\\"left-end\\">Popper</div>"
+<div id=\\"overlay\\" style=\\"position: absolute; left: 0px; top: 0px;\\" data-popper-reference-hidden=\\"\\" data-popper-placement=\\"left-end\\">Popper</div>"
 `;
 
 exports[`usePopper > options > placement work 2`] = `
 "<div id=\\"trigger\\">Trigger</div>
-<div id=\\"overlay\\" style=\\"position: absolute; left: 0px; top: 0px;\\" data-popper-placement=\\"left-end\\">Popper</div>"
+<div id=\\"overlay\\" style=\\"position: absolute; left: 0px; top: 0px;\\" data-popper-reference-hidden=\\"\\" data-popper-placement=\\"left-end\\">Popper</div>"
 `;
 
 exports[`usePopper > options > placement work 3`] = `
 "<div id=\\"trigger\\">Trigger</div>
-<div id=\\"overlay\\" style=\\"position: absolute; left: 0px; top: 0px;\\" data-popper-placement=\\"left-end\\">Popper</div>"
+<div id=\\"overlay\\" style=\\"position: absolute; left: 0px; top: 0px;\\" data-popper-reference-hidden=\\"\\" data-popper-placement=\\"left-end\\">Popper</div>"
 `;
 
 exports[`usePopper > options > placement work 4`] = `
 "<div id=\\"trigger\\">Trigger</div>
-<div id=\\"overlay\\" style=\\"position: absolute; left: 0px; top: 0px;\\" data-popper-placement=\\"left-end\\">Popper</div>"
+<div id=\\"overlay\\" style=\\"position: absolute; left: 0px; top: 0px;\\" data-popper-reference-hidden=\\"\\" data-popper-placement=\\"left-end\\">Popper</div>"
 `;
 
 exports[`usePopper > options > placement work 5`] = `
 "<div id=\\"trigger\\">Trigger</div>
-<div id=\\"overlay\\" style=\\"position: absolute; left: 0px; top: 0px;\\" data-popper-placement=\\"left-end\\">Popper</div>"
+<div id=\\"overlay\\" style=\\"position: absolute; left: 0px; top: 0px;\\" data-popper-reference-hidden=\\"\\" data-popper-placement=\\"left-end\\">Popper</div>"
 `;
 
 exports[`usePopper > options > placement work 6`] = `
 "<div id=\\"trigger\\">Trigger</div>
-<div id=\\"overlay\\" style=\\"position: absolute; left: 0px; top: 0px;\\" data-popper-placement=\\"left-end\\">Popper</div>"
+<div id=\\"overlay\\" style=\\"position: absolute; left: 0px; top: 0px;\\" data-popper-reference-hidden=\\"\\" data-popper-placement=\\"left-end\\">Popper</div>"
 `;
 
 exports[`usePopper > options > placement work 7`] = `
 "<div id=\\"trigger\\">Trigger</div>
-<div id=\\"overlay\\" style=\\"position: absolute; left: 0px; top: 0px;\\" data-popper-placement=\\"left-end\\">Popper</div>"
+<div id=\\"overlay\\" style=\\"position: absolute; left: 0px; top: 0px;\\" data-popper-reference-hidden=\\"\\" data-popper-placement=\\"left-end\\">Popper</div>"
 `;
 
 exports[`usePopper > options > placement work 8`] = `
 "<div id=\\"trigger\\">Trigger</div>
-<div id=\\"overlay\\" style=\\"position: absolute; left: 0px; top: 0px;\\" data-popper-placement=\\"left-end\\">Popper</div>"
+<div id=\\"overlay\\" style=\\"position: absolute; left: 0px; top: 0px;\\" data-popper-reference-hidden=\\"\\" data-popper-placement=\\"left-end\\">Popper</div>"
 `;
 
 exports[`usePopper > options > placement work 9`] = `
 "<div id=\\"trigger\\">Trigger</div>
-<div id=\\"overlay\\" style=\\"position: absolute; left: 0px; top: 0px;\\" data-popper-placement=\\"left-end\\">Popper</div>"
+<div id=\\"overlay\\" style=\\"position: absolute; left: 0px; top: 0px;\\" data-popper-reference-hidden=\\"\\" data-popper-placement=\\"left-end\\">Popper</div>"
 `;
 
 exports[`usePopper > options > placement work 10`] = `
 "<div id=\\"trigger\\">Trigger</div>
-<div id=\\"overlay\\" style=\\"position: absolute; left: 0px; top: 0px;\\" data-popper-placement=\\"left-end\\">Popper</div>"
+<div id=\\"overlay\\" style=\\"position: absolute; left: 0px; top: 0px;\\" data-popper-reference-hidden=\\"\\" data-popper-placement=\\"left-end\\">Popper</div>"
 `;
 
 exports[`usePopper > options > placement work 11`] = `
 "<div id=\\"trigger\\">Trigger</div>
-<div id=\\"overlay\\" style=\\"position: absolute; left: 0px; top: 0px;\\" data-popper-placement=\\"left-end\\">Popper</div>"
+<div id=\\"overlay\\" style=\\"position: absolute; left: 0px; top: 0px;\\" data-popper-reference-hidden=\\"\\" data-popper-placement=\\"left-end\\">Popper</div>"
 `;
 
 exports[`usePopper > options > placement work 12`] = `
 "<div id=\\"trigger\\">Trigger</div>
-<div id=\\"overlay\\" style=\\"position: absolute; left: 0px; top: 0px;\\" data-popper-placement=\\"left-end\\">Popper</div>"
+<div id=\\"overlay\\" style=\\"position: absolute; left: 0px; top: 0px;\\" data-popper-reference-hidden=\\"\\" data-popper-placement=\\"left-end\\">Popper</div>"
 `;
diff --git a/packages/cdk/popper/src/middlewares/refenceHidden.ts b/packages/cdk/popper/src/middlewares/refenceHidden.ts
@@ -5,7 +5,9 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import { type Middleware, type Side, type SideObject, hide } from '@floating-ui/dom'
+import { type Middleware, type ReferenceElement, type Side, type SideObject, hide } from '@floating-ui/dom'
+
+import { isVisibleElement } from '@idux/cdk/utils'
 
 export const referenceHiddenMiddlewareName = 'IDUX_referenceHidden'
 export interface ReferenceHiddenData {
@@ -23,19 +25,26 @@ export function referenceHidden(): Middleware {
     name: referenceHiddenMiddlewareName,
     async fn(middlewareArguments) {
       const {
-        elements: { floating },
+        elements: { floating, reference },
       } = middlewareArguments
 
       const res = (await hideFn(middlewareArguments)) as {
         data: ReferenceHiddenData
       }
       const {
-        data: { referenceHiddenOffsets },
+        data: { referenceHidden, referenceHiddenOffsets },
       } = res
 
-      const referenceHidden = sides.some(side => referenceHiddenOffsets[side] > 0)
+      const shouldHideReference =
+        referenceHidden &&
+        !(
+          reference instanceof HTMLElement &&
+          getComputedStyle(reference).display === 'none' &&
+          sides.some(side => referenceHiddenOffsets[side] === 0) &&
+          checkParentsVisible(reference)
+        )
 
-      if (sides.some(side => referenceHiddenOffsets[side] > 0)) {
+      if (shouldHideReference) {
         floating.setAttribute('data-popper-reference-hidden', '')
       } else {
         floating.removeAttribute('data-popper-reference-hidden')
@@ -45,9 +54,26 @@ export function referenceHidden(): Middleware {
         ...res,
         data: {
           ...res.data,
-          referenceHidden,
+          referenceHidden: shouldHideReference,
         },
       }
     },
   }
 }
+
+function checkParentsVisible(el: ReferenceElement): boolean {
+  if (!(el instanceof HTMLElement)) {
+    return true
+  }
+
+  let parent = el.parentElement
+  while (parent) {
+    if (!isVisibleElement(parent)) {
+      return false
+    }
+
+    parent = parent.parentElement
+  }
+
+  return true
+}