fix(popover, collapsible): DP-185811 cancel transitions on unmount (#1241)

Author: braddialpad

packages/dialtone-vue/components/collapsible/collapsible.test.js

@@ -145,6 +145,40 @@ describe('DtCollapsible Tests', () => {
     });
   });
 
+  describe('When component is unmounting', () => {
+    beforeEach(() => {
+      wrapper.vm._isUnmounting = true;
+    });
+
+    it('does not emit "opened" when leave transition completes', async () => {
+      await wrapper.vm.onLeaveTransitionComplete();
+      expect(wrapper.emitted('opened')).toBeUndefined();
+    });
+
+    it('does not emit "opened" when enter transition completes', async () => {
+      await wrapper.vm.onEnterTransitionComplete();
+      expect(wrapper.emitted('opened')).toBeUndefined();
+    });
+
+    describe('in controlled mode (open !== null)', () => {
+      beforeEach(async () => {
+        await wrapper.setProps({ open: false });
+      });
+
+      it('does not emit "opened" or "update:open" when leave transition completes', async () => {
+        await wrapper.vm.onLeaveTransitionComplete();
+        expect(wrapper.emitted('opened')).toBeUndefined();
+        expect(wrapper.emitted('update:open')).toBeUndefined();
+      });
+
+      it('does not emit "opened" or "update:open" when enter transition completes', async () => {
+        await wrapper.vm.onEnterTransitionComplete();
+        expect(wrapper.emitted('opened')).toBeUndefined();
+        expect(wrapper.emitted('update:open')).toBeUndefined();
+      });
+    });
+  });
+
   describe('Accessibility Tests', () => {
     describe('Content is expanded', () => {
       beforeEach(async () => {

packages/dialtone-vue/components/collapsible/collapsible.vue

@@ -247,15 +247,23 @@ export default {
     this.validateProperAnchor();
   },
 
+  beforeUnmount () {
+    this._isUnmounting = true;
+    // Prevent transition callbacks from calling into dead lifecycle methods
+    // after this component is torn down (DP-185811).
+  },
+
   methods: {
     onLeaveTransitionComplete () {
+      if (this._isUnmounting) return;
       this.$emit('opened', false);
       if (this.open !== null) {
         this.$emit('update:open', false);
       }
     },
 
     onEnterTransitionComplete () {
+      if (this._isUnmounting) return;
       this.$emit('opened', true, this.$refs.content);
       if (this.open !== null) {
         this.$emit('update:open', true);

packages/dialtone-vue/components/popover/popover.test.js

@@ -305,6 +305,56 @@ describe('DtPopover Tests', () => {
     });
   });
 
+  describe('When component is unmounting', () => {
+    beforeEach(() => {
+      wrapper.vm._isUnmounting = true;
+    });
+
+    it('sets transition: none on content element to cancel in-flight transitions', () => {
+      const contentEl = wrapper.vm.popoverContentEl;
+      wrapper.unmount();
+      expect(contentEl.style.transition).toBe('none');
+    });
+
+    it('does not emit "opened" when leave transition completes', async () => {
+      await wrapper.vm.onLeaveTransitionComplete();
+      expect(wrapper.emitted('opened')).toBeUndefined();
+    });
+
+    it('emits "opened" and respects open prop when leave transition completes and not unmounting', async () => {
+      wrapper.vm._isUnmounting = false;
+      await wrapper.vm.onLeaveTransitionComplete();
+      expect(wrapper.emitted('opened')).toBeDefined();
+      expect(wrapper.emitted('opened')[0]).toEqual([false]);
+      // uncontrolled (open === null): update:open is not emitted
+      expect(wrapper.emitted('update:open')).toBeUndefined();
+      // controlled (open !== null): update:open is emitted
+      await wrapper.setProps({ open: false });
+      await wrapper.vm.onLeaveTransitionComplete();
+      expect(wrapper.emitted('update:open')).toBeDefined();
+      expect(wrapper.emitted('update:open')[0]).toEqual([false]);
+    });
+
+    it('does not emit "opened" when enter transition completes', async () => {
+      await wrapper.vm.onEnterTransitionComplete();
+      expect(wrapper.emitted('opened')).toBeUndefined();
+    });
+
+    it('emits "opened" and respects open prop when enter transition completes and not unmounting', async () => {
+      wrapper.vm._isUnmounting = false;
+      await wrapper.vm.onEnterTransitionComplete();
+      expect(wrapper.emitted('opened')).toBeDefined();
+      expect(wrapper.emitted('opened')[0][0]).toBe(true);
+      // uncontrolled (open === null): update:open is not emitted
+      expect(wrapper.emitted('update:open')).toBeUndefined();
+      // controlled (open !== null): update:open is emitted
+      await wrapper.setProps({ open: false });
+      await wrapper.vm.onEnterTransitionComplete();
+      expect(wrapper.emitted('update:open')).toBeDefined();
+      expect(wrapper.emitted('update:open')[0]).toEqual([true]);
+    });
+  });
+
   describe('When anchor slot content changes', () => {
     it('should attach the tippy instance to the new DOM node', async () => {
       const component = {

packages/dialtone-vue/components/popover/popover.vue

@@ -712,6 +712,12 @@ export default {
   },
 
   beforeUnmount () {
+    this._isUnmounting = true;
+    // Cancel any in-progress CSS transitions so transitionend cannot fire
+    // after this component is torn down and call into dead lifecycle methods.
+    if (this.popoverContentEl) {
+      this.popoverContentEl.style.transition = 'none';
+    }
     this.tip?.destroy();
     this.intersectionObserver?.disconnect();
     this.mutationObserver?.disconnect();
@@ -904,12 +910,16 @@ export default {
     },
 
     async onLeaveTransitionComplete () {
+      if (this._isUnmounting) return;
       if (this.modal) {
         await this.focusFirstElement(this.$refs.anchor);
+        if (this._isUnmounting) return;
         // await next tick in case the user wants to change focus themselves.
         await this.$nextTick();
+        if (this._isUnmounting) return;
         this.enableScrolling();
       }
+      if (this._isUnmounting) return;
       this.tip?.unmount();
       this.$emit('opened', false);
       if (this.open !== null) {
@@ -918,9 +928,11 @@ export default {
     },
 
     async onEnterTransitionComplete () {
+      if (this._isUnmounting) return;
       this.focusInitialElement();
       // await next tick in case the user wants to change focus themselves.
       await this.$nextTick();
+      if (this._isUnmounting) return;
       this.preventScrolling();
       this.$emit('opened', true, this.$refs.popover__content);
       if (this.open !== null) {