diff --git a/packages/vue-collapsed/package.json b/packages/vue-collapsed/package.json index e84b15e..1735648 100644 --- 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 index d6e6aa9..18e4f4a 100644 --- 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({