@redseed/redseed-ui-vue3 10.3.1 → 10.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-vue3",
-    "version": "10.3.1",
+    "version": "10.3.2",
     "description": "RedSeed UI Vue 3 components",
     "main": "index.js",
     "repository": "https://github.com/redseedtraining/redseed-ui",

package/src/components/Disclosure/Disclosure.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch, watchEffect, nextTick, onMounted, onBeforeUnmount } from 'vue'
+import { ref, shallowRef, watch, watchEffect, nextTick, onMounted, onBeforeUnmount } from 'vue'
 import { ChevronDownIcon } from '@heroicons/vue/24/outline'
 import { ButtonTertiary } from '../Button'
 import Icon from '../Icon/Icon.vue'
@@ -50,6 +50,8 @@ async function setContentMaxHeight() {
 
     await nextTick()
 
+    if (!contentRef.value) return
+
     contentRef.value.style.minHeight = contentRef.value.scrollHeight + 'px'
 }
 
@@ -58,6 +60,8 @@ async function resetContentMaxHeight() {
 
     await nextTick()
 
+    if (!contentRef.value) return
+
     contentRef.value.style.removeProperty('min-height')
 }
 
@@ -88,7 +92,7 @@ watch(isOpen, (open, wasOpen) => {
 }, { flush: 'sync' })
 
 /**
- * Whether each teleport target currently exists.
+ * Each teleport target's current element, or null while it is absent.
  *
  * Re-checked rather than latched. These used to only ever flip true, and the
  * observer disconnected once both had been found — so a consumer that removed a
@@ -96,15 +100,23 @@ watch(isOpen, (open, wasOpen) => {
  * `SectionHeader` does exactly that: it width-gates the slots a target is
  * mounted into, so narrowing a header past 640px took the trigger away and the
  * section could no longer be opened. See #372.
+ *
+ * The element itself goes to `to`, not an `#id` selector. Vue resolves a
+ * selector once, when the Teleport mounts, and never again when only
+ * `disabled` flips. A Disclosure mounted inside a subtree that is not yet in the
+ * document resolved null there, and enabling it then threw "Cannot read
+ * properties of null (reading 'insertBefore')" and wedged the whole page. A
+ * changed `to` is re-resolved, so a target that appears late or is re-created
+ * gets the content moved into the live element.
  */
-const canTeleportTrigger = ref(false)
-const canTeleportContent = ref(false)
+const triggerTarget = shallowRef(null)
+const contentTarget = shallowRef(null)
 
 let observer = null
 
 function setTeleport() {
-    canTeleportTrigger.value = Boolean(document.getElementById(triggerId))
-    canTeleportContent.value = Boolean(document.getElementById(contentId))
+    triggerTarget.value = document.getElementById(triggerId)
+    contentTarget.value = document.getElementById(contentId)
 }
 
 onMounted(() => {
@@ -149,8 +161,8 @@ onBeforeUnmount(() => {
         Vue's own `disabled` keeps this as one definition rendered in one of two
         places, rather than two copies that can drift.
     -->
-    <Teleport :to="`#${triggerId}`"
-        :disabled="!canTeleportTrigger"
+    <Teleport :to="triggerTarget"
+        :disabled="!triggerTarget"
     >
         <slot name="trigger"
             :handleTrigger="handleTrigger"
@@ -184,8 +196,8 @@ onBeforeUnmount(() => {
     </Teleport>
 
     <!-- Same reasoning as the trigger above: in place rather than nowhere. -->
-    <Teleport :to="`#${contentId}`"
-        :disabled="!canTeleportContent"
+    <Teleport :to="contentTarget"
+        :disabled="!contentTarget"
     >
         <div ref="contentRef"
             :class="[