diff --git a/packages/cdk/popper/__tests__/__snapshots__/popper.spec.ts.snap b/packages/cdk/popper/__tests__/__snapshots__/popper.spec.ts.snap
index fc832f3e2..d0d22dd7d 100644
--- 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`] = `
"Trigger
-Popper
"
+Popper
"
`;
exports[`usePopper > options > offset work 2`] = `
"Trigger
-Popper
"
+Popper
"
`;
exports[`usePopper > options > placement work 1`] = `
"Trigger
-Popper
"
+Popper
"
`;
exports[`usePopper > options > placement work 2`] = `
"Trigger
-Popper
"
+Popper
"
`;
exports[`usePopper > options > placement work 3`] = `
"Trigger
-Popper
"
+Popper
"
`;
exports[`usePopper > options > placement work 4`] = `
"Trigger
-Popper
"
+Popper
"
`;
exports[`usePopper > options > placement work 5`] = `
"Trigger
-Popper
"
+Popper
"
`;
exports[`usePopper > options > placement work 6`] = `
"Trigger
-Popper
"
+Popper
"
`;
exports[`usePopper > options > placement work 7`] = `
"Trigger
-Popper
"
+Popper
"
`;
exports[`usePopper > options > placement work 8`] = `
"Trigger
-Popper
"
+Popper
"
`;
exports[`usePopper > options > placement work 9`] = `
"Trigger
-Popper
"
+Popper
"
`;
exports[`usePopper > options > placement work 10`] = `
"Trigger
-Popper
"
+Popper
"
`;
exports[`usePopper > options > placement work 11`] = `
"Trigger
-Popper
"
+Popper
"
`;
exports[`usePopper > options > placement work 12`] = `
"Trigger
-Popper
"
+Popper
"
`;
diff --git a/packages/cdk/popper/src/middlewares/refenceHidden.ts b/packages/cdk/popper/src/middlewares/refenceHidden.ts
index 2975dce54..f275450c9 100644
--- 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
+}