fix: select position align not update #3085

vueComponent · Nov 2, 2020 · 0302908 · 0302908
1 parent 8dc62f5
commit 0302908
Showing 1 changed file with 22 additions and 11 deletions.
diff --git a/components/vc-align/Align.jsx b/components/vc-align/Align.jsx
@@ -4,7 +4,6 @@ import { alignElement, alignPoint } from 'dom-align';
 import addEventListener from '../vc-util/Dom/addEventListener';
 import { isWindow, buffer, isSamePoint, restoreFocus, monitorResize } from './util';
 import { cloneElement } from '../_util/vnode';
-import clonedeep from 'lodash-es/cloneDeep';
 import { getSlot, findDOMNode } from '../_util/props-util';
 import useBuffer from './hooks/useBuffer';
 import isVisible from '../vc-util/Dom/isVisible';
@@ -28,10 +27,15 @@ export default defineComponent({
  monitorWindowResize: PropTypes.looseBool.def(false),
  disabled: PropTypes.looseBool.def(false),
  },
+ setup() {
+ return {
+ aligned: false,
+ sourceResizeMonitor: { cancel: () => {} },
+ resizeMonitor: { cancel: () => {} },
+ cacheInfo: {},
+ };
+ },
  data() {
- this.aligned = false;
- this.sourceResizeMonitor = { cancel: () => {} };
- this.resizeMonitor = { cancel: () => {} };
  this.prevProps = { ...this.$props };
  const [forceAlign, cancelForceAlign] = useBuffer(this.goAlign, 0);
  return {
@@ -48,6 +52,7 @@ export default defineComponent({
  this.startMonitorWindowResize();
  }
  this.startMonitorElementResize();
+ this.updateCache();
  });
  },
  updated() {
@@ -59,9 +64,8 @@ export default defineComponent({
  if (prevProps.disabled) {
  reAlign = true;
  } else {
- const lastElement = getElement(prevProps.target);
+ const { element: lastElement, point: lastPoint } = this.cacheInfo;
  const currentElement = getElement(props.target);
- const lastPoint = getPoint(prevProps.target);
  const currentPoint = getPoint(props.target);
  if (isWindow(lastElement) && isWindow(currentElement)) {
  // Skip if is window
@@ -86,7 +90,8 @@ export default defineComponent({
  } else {
  this.stopMonitorWindowResize();
  }
- this.prevProps = { ...this.$props, align: clonedeep(this.$props.align) };
+ this.prevProps = { ...this.$props };
+ this.updateCache();
  });
  },
  beforeUnmount() {
@@ -96,12 +101,18 @@ export default defineComponent({
  this.cancelForceAlign();
  },
  methods: {
+ updateCache() {
+ const element = getElement(this.$props.target);
+ const point = getPoint(this.$props.target);
+ this.cacheInfo = {
+ element,
+ point,
+ };
+ },
  startMonitorElementResize() {
- const prevProps = this.prevProps;
  const props = this.$props;
- const lastElement = getElement(prevProps.target);
+ const { element: lastElement, point: lastPoint } = this.cacheInfo;
  const currentElement = getElement(props.target);
- const lastPoint = getPoint(prevProps.target);
  const currentPoint = getPoint(props.target);
  const source = findDOMNode(this);
  const { sourceResizeMonitor, resizeMonitor } = this;
@@ -111,7 +122,7 @@ export default defineComponent({
  sourceResizeMonitor.cancel = monitorResize(source, this.forceAlign);
  }
  if (lastElement !== currentElement || !isSamePoint(lastPoint, currentPoint)) {
- //this.forceAlign();
+ this.forceAlign();
  // Add resize observer
  if (resizeMonitor.element !== currentElement) {
  resizeMonitor?.cancel();