fix: forceMount on scrollArea

packages/radix-vue/src/Presence/Presence.vue

@@ -65,6 +65,9 @@ function render() {
     return h(slots.default?.()[0] as VNode, {
       ref: (v) => {
         const el = unrefElement(v as HTMLElement)
+        if (typeof el?.hasAttribute === 'undefined')
+          return el
+
         // special case to handle animation for PopperContent
         if (el?.hasAttribute('data-radix-popper-content-wrapper'))
           node.value = el.firstChild as HTMLElement

packages/radix-vue/src/ScrollArea/ScrollAreaScrollbar.vue

@@ -101,7 +101,6 @@ provideScrollAreaScrollbarContext({
     v-else-if="rootContext.type.value === 'always'"
     v-bind="$attrs"
     data-state="visible"
-    :force-mount="forceMount"
   >
     <slot />
   </ScrollAreaScrollbarVisible>

packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarAuto.vue

@@ -4,10 +4,19 @@ import { useDebounceFn, useResizeObserver } from '@vueuse/core'
 import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
 import { injectScrollAreaScrollbarContext } from './ScrollAreaScrollbar.vue'
 import ScrollAreaScrollbarVisible from './ScrollAreaScrollbarVisible.vue'
+import { Presence } from '@/Presence'
+import { useForwardRef } from '@/shared'
+
+export interface ScrollAreaScrollbarAutoProps {
+  forceMount?: boolean
+}
+defineProps<ScrollAreaScrollbarAutoProps>()
 
 const rootContext = injectScrollAreaRootContext()
 const scrollbarContext = injectScrollAreaScrollbarContext()
 
+const forwardRef = useForwardRef()
+
 const visible = ref(false)
 
 const handleResize = useDebounceFn(() => {
@@ -32,11 +41,13 @@ useResizeObserver(rootContext.content, handleResize)
 </script>
 
 <template>
-  <ScrollAreaScrollbarVisible
-    v-if="visible"
-    v-bind="$attrs"
-    :data-state="visible ? 'visible' : 'hidden'"
-  >
-    <slot />
-  </ScrollAreaScrollbarVisible>
+  <Presence :present="forceMount || visible">
+    <ScrollAreaScrollbarVisible
+      v-bind="$attrs"
+      ref="forwardRef"
+      :data-state="visible ? 'visible' : 'hidden'"
+    >
+      <slot />
+    </ScrollAreaScrollbarVisible>
+  </Presence>
 </template>

packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarHover.vue

@@ -1,10 +1,17 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from 'vue'
 import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
-import ScrollAreaScrollbarAuto from './ScrollAreaScrollbarAuto.vue'
+import ScrollAreaScrollbarAuto, { type ScrollAreaScrollbarAutoProps } from './ScrollAreaScrollbarAuto.vue'
+import { Presence } from '@/Presence'
+import { useForwardRef } from '@/shared'
+
+export interface ScrollAreaScrollbarHoverProps extends ScrollAreaScrollbarAutoProps {}
+defineProps<ScrollAreaScrollbarHoverProps>()
 
 const rootContext = injectScrollAreaRootContext()
 
+const forwardRef = useForwardRef()
+
 let timeout: ReturnType<typeof setTimeout> | undefined | number
 const visible = ref(false)
 
@@ -44,11 +51,13 @@ export default {
 </script>
 
 <template>
-  <ScrollAreaScrollbarAuto
-    v-if="visible"
-    v-bind="$attrs"
-    :data-state="visible ? 'visible' : 'hidden'"
-  >
-    <slot />
-  </ScrollAreaScrollbarAuto>
+  <Presence :present="forceMount || visible">
+    <ScrollAreaScrollbarAuto
+      v-bind="$attrs"
+      ref="forwardRef"
+      :data-state="visible ? 'visible' : 'hidden'"
+    >
+      <slot />
+    </ScrollAreaScrollbarAuto>
+  </Presence>
 </template>

packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarImpl.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from 'vue'
+import { type ComponentPublicInstance, onMounted, onUnmounted, ref } from 'vue'
 import { useResizeObserver } from '@vueuse/core'
 import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
 import { injectScrollAreaScrollbarVisibleContext } from './ScrollAreaScrollbarVisible.vue'
 import { injectScrollAreaScrollbarContext } from './ScrollAreaScrollbar.vue'
 import { toInt } from './utils'
 import { Primitive, usePrimitiveElement } from '@/Primitive'
+import { useForwardRef } from '@/shared'
 
 const props = defineProps<ScrollAreaScrollbarImplProps>()
 const emit = defineEmits<{
@@ -22,6 +23,7 @@ export interface ScrollAreaScrollbarImplProps {
 }
 
 const { primitiveElement, currentElement: scrollbar } = usePrimitiveElement()
+const forwardRef = useForwardRef()
 const prevWebkitUserSelectRef = ref('')
 const rectRef = ref<DOMRect>()
 
@@ -117,7 +119,10 @@ useResizeObserver(rootContext.content, handleSizeChange)
 
 <template>
   <Primitive
-    ref="primitiveElement"
+    :ref="vnode => {
+      forwardRef(vnode)
+      primitiveElement = vnode as ComponentPublicInstance
+    }"
     style="position: absolute"
     data-scrollbarimpl
     :as="scrollbarContext.as.value"

packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarScroll.vue

@@ -5,10 +5,19 @@ import { useStateMachine } from '../shared/useStateMachine'
 import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
 import { injectScrollAreaScrollbarContext } from './ScrollAreaScrollbar.vue'
 import ScrollAreaScrollbarVisible from './ScrollAreaScrollbarVisible.vue'
+import { Presence } from '@/Presence'
+import { useForwardRef } from '@/shared'
+
+export interface ScrollAreaScrollbarScrollProps {
+  forceMount?: boolean
+}
+defineProps<ScrollAreaScrollbarScrollProps>()
 
 const rootContext = injectScrollAreaRootContext()
 const scrollbarContext = injectScrollAreaScrollbarContext()
 
+const forwardRef = useForwardRef()
+
 const { state, dispatch } = useStateMachine('hidden', {
   hidden: {
     SCROLL: 'scrolling',
@@ -62,7 +71,9 @@ watchEffect(() => {
 </script>
 
 <template>
-  <ScrollAreaScrollbarVisible v-if="state !== 'hidden'" v-bind="$attrs">
-    <slot />
-  </ScrollAreaScrollbarVisible>
+  <Presence :present="forceMount || state !== 'hidden'">
+    <ScrollAreaScrollbarVisible v-bind="$attrs" ref="forwardRef">
+      <slot />
+    </ScrollAreaScrollbarVisible>
+  </Presence>
 </template>

packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarVisible.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { createContext } from '@/shared'
+import { createContext, useForwardRef } from '@/shared'
 
 export interface ScrollAreaScrollbarVisibleContext {
   sizes: Ref<Sizes>
@@ -40,6 +40,7 @@ import {
 
 const rootContext = injectScrollAreaRootContext()
 const scrollbarContext = injectScrollAreaScrollbarContext()
+const forwardRef = useForwardRef()
 
 const sizes = ref<Sizes>({
   content: 0,
@@ -150,10 +151,10 @@ provideScrollAreaScrollbarVisibleContext({
 </script>
 
 <template>
-  <ScrollAreaScrollbarX v-if="isShowingScrollbarX" v-bind="$attrs">
+  <ScrollAreaScrollbarX v-if="isShowingScrollbarX" v-bind="$attrs" ref="forwardRef">
     <slot />
   </ScrollAreaScrollbarX>
-  <ScrollAreaScrollbarY v-else v-bind="$attrs">
+  <ScrollAreaScrollbarY v-else v-bind="$attrs" ref="forwardRef">
     <slot />
   </ScrollAreaScrollbarY>
 </template>

packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarX.vue

@@ -1,16 +1,18 @@
 <script setup lang="ts">
-import { computed, onMounted } from 'vue'
+import { type ComponentPublicInstance, computed, onMounted } from 'vue'
 import { injectScrollAreaScrollbarVisibleContext } from './ScrollAreaScrollbarVisible.vue'
 import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
 import ScrollAreaScrollbarImpl from './ScrollAreaScrollbarImpl.vue'
 import { getThumbSize } from './utils'
 import { usePrimitiveElement } from '@/Primitive'
+import { useForwardRef } from '@/shared'
 
 const rootContext = injectScrollAreaRootContext()
 const scrollbarVisibleContext = injectScrollAreaScrollbarVisibleContext()
 
 const { primitiveElement, currentElement: scrollbarElement }
   = usePrimitiveElement()
+const forwardRef = useForwardRef()
 
 onMounted(() => {
   if (scrollbarElement.value)
@@ -21,7 +23,10 @@ const sizes = computed(() => scrollbarVisibleContext.sizes.value)
 
 <template>
   <ScrollAreaScrollbarImpl
-    ref="primitiveElement"
+    :ref="vnode => {
+      forwardRef(vnode)
+      primitiveElement = vnode as ComponentPublicInstance
+    }"
     :is-horizontal="true"
     data-orientation="horizontal"
     :style="{

packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarY.vue

@@ -1,16 +1,18 @@
 <script setup lang="ts">
-import { computed, onMounted } from 'vue'
+import { type ComponentPublicInstance, computed, onMounted } from 'vue'
 import { injectScrollAreaScrollbarVisibleContext } from './ScrollAreaScrollbarVisible.vue'
 import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
 import ScrollAreaScrollbarImpl from './ScrollAreaScrollbarImpl.vue'
 import { getThumbSize } from './utils'
 import { usePrimitiveElement } from '@/Primitive'
+import { useForwardRef } from '@/shared'
 
 const rootContext = injectScrollAreaRootContext()
 const scrollbarVisibleContext = injectScrollAreaScrollbarVisibleContext()
 
 const { primitiveElement, currentElement: scrollbarElement }
   = usePrimitiveElement()
+const forwardRef = useForwardRef()
 
 onMounted(() => {
   if (scrollbarElement.value)
@@ -22,7 +24,10 @@ const sizes = computed(() => scrollbarVisibleContext.sizes.value)
 
 <template>
   <ScrollAreaScrollbarImpl
-    ref="primitiveElement"
+    :ref="vnode => {
+      forwardRef(vnode)
+      primitiveElement = vnode as ComponentPublicInstance
+    }"
     :is-horizontal="false"
     data-orientation="vertical"
     :style="{

packages/radix-vue/src/ScrollArea/__snapshots__/ScrollArea.test.ts.snap

@@ -47,7 +47,7 @@ exports[`given default ScrollArea > should render content, but not scrollbar 1`]
       <p class=\\"w-[4000px]\\" style=\\"width: 50px;\\"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet eros iaculis, bibendum tellus ac, lobortis odio. Aliquam bibendum elit est, in iaculis est commodo id. Donec pulvinar est libero. Proin consectetur pellentesque molestie. Fusce mi ante, ullamcorper eu ante finibus, finibus pellentesque turpis. Mauris convallis, leo in vulputate varius, sapien lectus suscipit eros, ac semper odio sapien sit amet magna. Sed mattis turpis et lacinia ultrices. Nulla a commodo mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque id tempor metus. Pellentesque faucibus tortor non nisi maximus dignissim. Etiam leo nisi, molestie a porttitor at, euismod a libero. Nullam placerat tristique enim nec pulvinar. Sed eleifend dictum nulla a aliquam. Sed tempus ipsum eget urna posuere aliquam. Nulla maximus tortor dui, sed laoreet odio aliquet ac. Vestibulum dolor orci, lacinia finibus vehicula eget, posuere ac lectus. Quisque non felis at ipsum scelerisque condimentum. In pharetra semper arcu, ut hendrerit sem auctor vel. Aliquam non lacinia elit, a facilisis ante. Praesent eget eros augue. Praesent nunc orci, ullamcorper non pulvinar eu, elementum id nibh. Nam id lorem euismod, sodales augue quis, porttitor magna. Vivamus ut nisl velit. Nam ultrices maximus felis, quis ullamcorper quam luctus et. </p>
     </div>
   </div>
-  <!--v-if-->
+  <!---->
   <!--v-if-->
 </div>"
 `;
@@ -126,7 +126,7 @@ exports[`given prop:type="scroll" ScrollArea > should render content and scrollb
       <p class=\\"w-[4000px]\\" style=\\"width: 50px;\\"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet eros iaculis, bibendum tellus ac, lobortis odio. Aliquam bibendum elit est, in iaculis est commodo id. Donec pulvinar est libero. Proin consectetur pellentesque molestie. Fusce mi ante, ullamcorper eu ante finibus, finibus pellentesque turpis. Mauris convallis, leo in vulputate varius, sapien lectus suscipit eros, ac semper odio sapien sit amet magna. Sed mattis turpis et lacinia ultrices. Nulla a commodo mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque id tempor metus. Pellentesque faucibus tortor non nisi maximus dignissim. Etiam leo nisi, molestie a porttitor at, euismod a libero. Nullam placerat tristique enim nec pulvinar. Sed eleifend dictum nulla a aliquam. Sed tempus ipsum eget urna posuere aliquam. Nulla maximus tortor dui, sed laoreet odio aliquet ac. Vestibulum dolor orci, lacinia finibus vehicula eget, posuere ac lectus. Quisque non felis at ipsum scelerisque condimentum. In pharetra semper arcu, ut hendrerit sem auctor vel. Aliquam non lacinia elit, a facilisis ante. Praesent eget eros augue. Praesent nunc orci, ullamcorper non pulvinar eu, elementum id nibh. Nam id lorem euismod, sodales augue quis, porttitor magna. Vivamus ut nisl velit. Nam ultrices maximus felis, quis ullamcorper quam luctus et. </p>
     </div>
   </div>
-  <!--v-if-->
+  <!---->
   <!--v-if-->
 </div>"
 `;