1.3.3 (#28)

* force onExpanded/onCollapsed for edge cases, fix #25 * bump 1.3.3 * force onExpanded/onCollapsed for edge cases, fix #25, 2 * cleanup
smastrom · Apr 9, 2024 · bb5ca09 · bb5ca09
1 parent 8c508d4
commit bb5ca09
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/packages/vue-collapsed/package.json b/packages/vue-collapsed/package.json
@@ -1,6 +1,6 @@
 {
    "name": "vue-collapsed",
-   "version": "1.3.2",
+   "version": "1.3.3",
    "private": false,
    "description": "Dynamic CSS height transition from any to auto and vice versa for Vue 3. Accordion ready.",
    "keywords": [

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 and 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({