diff --git a/components/vc-align/Align.tsx b/components/vc-align/Align.tsx index 6dd82e847..f210f1951 100644 --- a/components/vc-align/Align.tsx +++ b/components/vc-align/Align.tsx @@ -8,6 +8,7 @@ import isVisible from '../vc-util/Dom/isVisible'; import { isSamePoint, restoreFocus, monitorResize } from './util'; import type { AlignType, AlignResult, TargetType, TargetPoint } from './interface'; import useBuffer from './hooks/useBuffer'; +import isEqual from 'lodash-es/isEqual'; type OnAlign = (source: HTMLElement, result: AlignResult) => void; @@ -53,11 +54,12 @@ export default defineComponent({ props: alignProps, emits: ['align'], setup(props, { expose, slots }) { - const cacheRef = ref<{ element?: HTMLElement; point?: TargetPoint }>({}); + const cacheRef = ref<{ element?: HTMLElement; point?: TargetPoint; align?: AlignType }>({}); const nodeRef = ref(); const forceAlignPropsRef = computed(() => ({ disabled: props.disabled, target: props.target, + align: props.align, onAlign: props.onAlign, })); @@ -66,6 +68,7 @@ export default defineComponent({ const { disabled: latestDisabled, target: latestTarget, + align: latestAlign, onAlign: latestOnAlign, } = forceAlignPropsRef.value; if (!latestDisabled && latestTarget && nodeRef.value && nodeRef.value.$el) { @@ -77,16 +80,16 @@ export default defineComponent({ cacheRef.value.element = element; cacheRef.value.point = point; - + cacheRef.value.align = latestAlign; // IE lose focus after element realign // We should record activeElement and restore later const { activeElement } = document; // We only align when element is visible if (element && isVisible(element)) { - result = alignElement(source, element, props.align); + result = alignElement(source, element, latestAlign); } else if (point) { - result = alignPoint(source, point, props.align); + result = alignPoint(source, point, latestAlign); } restoreFocus(activeElement, source); @@ -124,7 +127,11 @@ export default defineComponent({ sourceResizeMonitor.value.cancel = monitorResize(nodeRef.value.$el, forceAlign); } - if (cacheRef.value.element !== element || !isSamePoint(cacheRef.value.point, point)) { + if ( + cacheRef.value.element !== element || + !isSamePoint(cacheRef.value.point, point) || + !isEqual(cacheRef.value.align, props.align) + ) { forceAlign(); // Add resize observer