fix(DropdownMenu): incorrect menu position when scroll (youzan#5313)

huangniu8822 · Dec 19, 2019 · 329a5cd · 329a5cd
1 parent df6de0c
commit 329a5cd
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 3 deletions.
diff --git a/src/dropdown-item/index.js b/src/dropdown-item/index.js
@@ -1,9 +1,10 @@
 import { createNamespace } from '../utils';
+import { PortalMixin } from '../mixins/portal';
+import { ChildrenMixin } from '../mixins/relation';
+import { on, off } from '../utils/dom/event';
 import Cell from '../cell';
 import Icon from '../icon';
 import Popup from '../popup';
-import { PortalMixin } from '../mixins/portal';
-import { ChildrenMixin } from '../mixins/relation';
 
 const [createComponent, bem] = createNamespace('dropdown-item');
 
@@ -40,6 +41,12 @@ export default createComponent({
     }
   },
 
+  watch: {
+    showPopup(val) {
+      this.bindScroll(val);
+    }
+  },
+
   beforeCreate() {
     const createEmitter = eventName => () => this.$emit(eventName);
 
@@ -63,6 +70,16 @@ export default createComponent({
       }
     },
 
+    bindScroll(bind) {
+      const { scroller } = this.parent;
+      const action = bind ? on : off;
+      action(scroller, 'scroll', this.onScroll, true);
+    },
+
+    onScroll() {
+      this.parent.updateOffset();
+    },
+
     onClickWrapper(event) {
       // prevent being identified as clicking outside and closed when use get-contaienr
       if (this.getContainer) {

diff --git a/src/dropdown-menu/index.js b/src/dropdown-menu/index.js
@@ -2,6 +2,7 @@ import { createNamespace } from '../utils';
 import { BORDER_TOP_BOTTOM } from '../utils/constant';
 import { ParentMixin } from '../mixins/relation';
 import { ClickOutsideMixin } from '../mixins/click-outside';
+import { getScrollEventTarget } from '../utils/dom/scroll';
 
 const [createComponent, bem] = createNamespace('dropdown-menu');
 
@@ -44,6 +45,12 @@ export default createComponent({
     };
   },
 
+  computed: {
+    scroller() {
+      return getScrollEventTarget(this.$el);
+    }
+  },
+
   methods: {
     updateOffset() {
       const { menu } = this.$refs;

diff --git a/src/list/test/index.spec.js b/src/list/test/index.spec.js
@@ -32,7 +32,7 @@ test('error loaded, click error-text and reload', async () => {
   expect(wrapper.emitted('load')).toBeFalsy();
   expect(wrapper.emitted('input')).toBeFalsy();
 
-  // 模拟点击error-text的行为
+  // simulate the behavior of clicking error-text
   wrapper.vm.$on('update:error', val => {
     wrapper.setProps({
       error: val