Skip to content

Commit

Permalink
fix(cdk:popper): reference hidden popper are no longer updated (#1515)
Browse files Browse the repository at this point in the history
  • Loading branch information
@sallerli1
sallerli1 committed Mar 30, 2023
1 parent 3d4ce98 commit 9552ef3
Show file tree
Hide file tree
Showing 4 changed files with 59 additions and 24 deletions.
28 changes: 14 additions & 14 deletions packages/cdk/popper/__tests__/__snapshots__/popper.spec.ts.snap
View file
Expand Up @@ -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-reference-hidden=\\"\\" data-popper-placement=\\"top\\">Popper</div>"
<div id=\\"overlay\\" style=\\"position: absolute; left: 4px; top: -4px;\\" 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-reference-hidden=\\"\\" data-popper-placement=\\"top\\">Popper</div>"
<div id=\\"overlay\\" style=\\"position: absolute; left: 8px; top: -8px;\\" 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-reference-hidden=\\"\\" data-popper-placement=\\"left-end\\">Popper</div>"
<div id=\\"overlay\\" style=\\"position: absolute; left: 0px; top: 0px;\\" 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-reference-hidden=\\"\\" data-popper-placement=\\"left-end\\">Popper</div>"
<div id=\\"overlay\\" style=\\"position: absolute; left: 0px; top: 0px;\\" 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-reference-hidden=\\"\\" data-popper-placement=\\"left-end\\">Popper</div>"
<div id=\\"overlay\\" style=\\"position: absolute; left: 0px; top: 0px;\\" 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-reference-hidden=\\"\\" data-popper-placement=\\"left-end\\">Popper</div>"
<div id=\\"overlay\\" style=\\"position: absolute; left: 0px; top: 0px;\\" 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-reference-hidden=\\"\\" data-popper-placement=\\"left-end\\">Popper</div>"
<div id=\\"overlay\\" style=\\"position: absolute; left: 0px; top: 0px;\\" 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-reference-hidden=\\"\\" data-popper-placement=\\"left-end\\">Popper</div>"
<div id=\\"overlay\\" style=\\"position: absolute; left: 0px; top: 0px;\\" 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-reference-hidden=\\"\\" data-popper-placement=\\"left-end\\">Popper</div>"
<div id=\\"overlay\\" style=\\"position: absolute; left: 0px; top: 0px;\\" 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-reference-hidden=\\"\\" data-popper-placement=\\"left-end\\">Popper</div>"
<div id=\\"overlay\\" style=\\"position: absolute; left: 0px; top: 0px;\\" 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-reference-hidden=\\"\\" data-popper-placement=\\"left-end\\">Popper</div>"
<div id=\\"overlay\\" style=\\"position: absolute; left: 0px; top: 0px;\\" 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-reference-hidden=\\"\\" data-popper-placement=\\"left-end\\">Popper</div>"
<div id=\\"overlay\\" style=\\"position: absolute; left: 0px; top: 0px;\\" 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-reference-hidden=\\"\\" data-popper-placement=\\"left-end\\">Popper</div>"
<div id=\\"overlay\\" style=\\"position: absolute; left: 0px; top: 0px;\\" 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-reference-hidden=\\"\\" data-popper-placement=\\"left-end\\">Popper</div>"
<div id=\\"overlay\\" style=\\"position: absolute; left: 0px; top: 0px;\\" data-popper-placement=\\"left-end\\">Popper</div>"
`;
21 changes: 19 additions & 2 deletions packages/cdk/popper/src/composables/useInstance.ts
View file
Expand Up @@ -13,6 +13,8 @@ import { type ComputePositionConfig, type ComputePositionReturn, autoUpdate, com

import { convertElement } from '@idux/cdk/utils'

import { type ReferenceHiddenData, referenceHiddenMiddlewareName } from '../middlewares/refenceHidden'

export interface Instance {
update: () => Promise<void>
destroy: () => void
Expand All @@ -21,6 +23,7 @@ export interface Instance {
export function useInstance(
triggerRef: Ref<PopperElement | undefined>,
popperRef: Ref<PopperElement | undefined>,
visibility: Ref<boolean>,
options: Ref<ComputePositionConfig>,
): Instance {
const updatePopperPosition = (state: ComputePositionReturn) => {
Expand All @@ -44,8 +47,22 @@ export function useInstance(
return
}

const state = await computePosition(triggerEl, popperEl, options.value)
state && updatePopperPosition(state)
const state = (await computePosition(triggerEl, popperEl, options.value)) as ComputePositionReturn & {
middlewareData: {
[key in typeof referenceHiddenMiddlewareName]?: ReferenceHiddenData
}
}

if (
!visibility.value ||
!state ||
state.middlewareData[referenceHiddenMiddlewareName]?.referenceHidden ||
getComputedStyle(triggerEl).display === 'none'
) {
return
}

updatePopperPosition(state)
}

let cleanUpHandler: (() => void) | null = null
Expand Down
32 changes: 25 additions & 7 deletions packages/cdk/popper/src/middlewares/refenceHidden.ts
View file
Expand Up @@ -5,31 +5,49 @@
* found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
*/

import { type Middleware, hide } from '@floating-ui/dom'
import { type Middleware, type Side, type SideObject, hide } from '@floating-ui/dom'

export const referenceHiddenMiddlewareName = 'IDUX_referenceHidden'
export interface ReferenceHiddenData {
referenceHidden: boolean
referenceHiddenOffsets: SideObject
}

const sides: Side[] = ['top', 'bottom', 'left', 'right']

export function referenceHidden(): Middleware {
const { fn: hideFn, ...rest } = hide()
const { fn: hideFn, ...rest } = hide({ elementContext: 'reference' })

return {
...rest,
name: 'IDUX_referenceHidden',
name: referenceHiddenMiddlewareName,
async fn(middlewareArguments) {
const {
elements: { floating },
} = middlewareArguments

const res = (await hideFn(middlewareArguments)) as { data: { referenceHidden: boolean } }
const res = (await hideFn(middlewareArguments)) as {
data: ReferenceHiddenData
}
const {
data: { referenceHidden },
data: { referenceHiddenOffsets },
} = res

if (referenceHidden) {
const referenceHidden = sides.some(side => referenceHiddenOffsets[side] > 0)

if (sides.some(side => referenceHiddenOffsets[side] > 0)) {
floating.setAttribute('data-popper-reference-hidden', '')
} else {
floating.removeAttribute('data-popper-reference-hidden')
}

return res
return {
...res,
data: {
...res.data,
referenceHidden,
},
}
},
}
}
2 changes: 1 addition & 1 deletion packages/cdk/popper/src/usePopper.ts
View file
Expand Up @@ -76,7 +76,7 @@ export function usePopper<TE extends PopperElement = PopperElement, PE extends P

function initialize() {
destroy()
popperInstance = useInstance(triggerRef, popperRef, convertedOptions)
popperInstance = useInstance(triggerRef, popperRef, visibility, convertedOptions)
}

function destroy(): void {
Expand Down

0 comments on commit 9552ef3

Please sign in to comment.