fix(collapse): wait for transition to finish to remove overflow

lecoueyl · Apr 27, 2021 · 5b68b91 · 5b68b91
1 parent 1bf53d0
commit 5b68b91
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/src/components/collapse/Collapse.vue b/src/components/collapse/Collapse.vue
@@ -26,8 +26,8 @@
           stroke-linecap="round"
           fill="none"
           role="presentation"
-          class="stroke-2 w-5 h-5 transform transition-transform duration-200"
           :class="[
+            'stroke-2 w-5 h-5 transform transition-transform duration-200',
             iconLeft ? 'mr-2' : 'ml-2',
             { 'rotate-180': !collapsed }
           ]"
@@ -42,7 +42,11 @@
     </template>
 
     <div
-      class="overflow-y-hidden transition-all duration-300 ease-in-out"
+      class=""
+      :class="[
+        ' transition-all duration-300 ease-in-out',
+        { 'overflow-y-hidden': !expandedCompleted }
+      ]"
       :style="{ maxHeight: maxHeight + 'px' }"
     >
       <div ref="content">
@@ -53,6 +57,8 @@
 </template>
 
 <script>
+const collapseDurationMs = 300;
+
 export default {
   name: 'MijinCollapse',
 
@@ -81,6 +87,7 @@ export default {
   data() {
     return {
       collapsed: !this.expanded,
+      expandedCompleted: false,
       maxHeight: 0,
     };
   },
@@ -101,6 +108,13 @@ export default {
     toggleExpand() {
       if (this.disabled) return;
 
+      this.expandedCompleted = false;
+      if (this.collapsed) {
+        setTimeout(() => {
+          this.expandedCompleted = true;
+        }, collapseDurationMs);
+      }
+
       this.collapsed = !this.collapsed;
       this.$emit('toggle', this.collapsed);
       this.resizeContent();

diff --git a/src/components/collapse/collapse.unit.test.js b/src/components/collapse/collapse.unit.test.js
@@ -61,7 +61,7 @@ describe('Collapse', () => {
     expect(wrapper.vm.collapsed).toBe(false);
   });
 
-  it('expands content', async () => {
+  it('expands content', async (done) => {
     const wrapper = shallowMount(Collapse, {
       slots: {
         default: '<span>default</span>',
@@ -74,5 +74,10 @@ describe('Collapse', () => {
     await wrapper.find('span').trigger('click');
     expect(wrapper.vm.collapsed).toBe(false);
     expect(wrapper.emitted('toggle')).toBeTruthy();
+    expect(wrapper.vm.expandedCompleted).toBe(false);
+    setTimeout(() => {
+      expect(wrapper.vm.expandedCompleted).toBe(true);
+      done();
+    }, 300);
   });
 });