force onExpanded/onCollapsed for edge cases, fix #25, 2

smastrom · Apr 9, 2024 · 8de4342 · 8de4342
1 parent 5e8dc2a
commit 8de4342
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/packages/vue-collapsed/src/Collapse.vue b/packages/vue-collapsed/src/Collapse.vue
@@ -137,6 +137,8 @@ onMounted(() => {
 // Collapse / Expand handler
 
 watch(isExpanded, (isExpanding) => {
+   if (!collapseRef.value) return
+
    if (isExpanding) {
       if (isReducedOrDisabled(collapseRef)) return onExpanded()
 
@@ -161,7 +163,11 @@ watch(isExpanded, (isExpanding) => {
       })
 
       requestAnimationFrame(() => {
+         /** If for any unknown edge case the scrollHeight === 0, abort transition force expand */
+         if (collapseRef.value!.scrollHeight === 0) return onExpanded()
+
          /** Set height to scrollHeight and trigger the transition. */
+
          addStyles({
             ...getHeightProp(collapseRef),
             ...getTransitionProp(collapseRef),
@@ -186,6 +192,9 @@ watch(isExpanded, (isExpanding) => {
          ...getHeightProp(collapseRef),
       })
 
+      /** Same as for expand, abort transition and force collapse */
+      if (collapseRef.value.scrollHeight === 0) return onCollapsed()
+
       requestAnimationFrame(() => {
          /** Set height to baseHeight and trigger the transition. */
          addStyles({

diff --git a/packages/vue-collapsed/src/utils.ts b/packages/vue-collapsed/src/utils.ts
@@ -43,8 +43,7 @@ export function isReducedOrDisabled(el: RefEl) {
       typeof window.requestAnimationFrame === 'undefined' ||
       window.matchMedia('(prefers-reduced-motion: reduce)').matches ||
       transition.includes('none') ||
-      transition.includes('height 0s') ||
-      el.value.scrollHeight === 0
+      transition.includes('height 0s')
    )
 }