From 48b2757fd0971c9647b0f78821bd59c2a42daffc Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Fri, 20 Oct 2023 15:21:56 +0800
Subject: [PATCH] fix: forceMount on scrollArea

---
 packages/radix-vue/src/Presence/Presence.vue  |  3 +++
 .../src/ScrollArea/ScrollAreaScrollbar.vue    |  1 -
 .../ScrollArea/ScrollAreaScrollbarAuto.vue    | 25 +++++++++++++------
 .../ScrollArea/ScrollAreaScrollbarHover.vue   | 25 +++++++++++++------
 .../ScrollArea/ScrollAreaScrollbarImpl.vue    |  9 +++++--
 .../ScrollArea/ScrollAreaScrollbarScroll.vue  | 17 ++++++++++---
 .../ScrollArea/ScrollAreaScrollbarVisible.vue |  7 +++---
 .../src/ScrollArea/ScrollAreaScrollbarX.vue   |  9 +++++--
 .../src/ScrollArea/ScrollAreaScrollbarY.vue   |  9 +++++--
 .../__snapshots__/ScrollArea.test.ts.snap     |  4 +--
 10 files changed, 79 insertions(+), 30 deletions(-)

diff --git a/packages/radix-vue/src/Presence/Presence.vue b/packages/radix-vue/src/Presence/Presence.vue
index ccae079a8..7f492ea0a 100644
--- a/packages/radix-vue/src/Presence/Presence.vue
+++ b/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
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbar.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbar.vue
index 5280f13fe..78e139207 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbar.vue
+++ b/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>
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarAuto.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarAuto.vue
index 9b3199f5d..7f5f37437 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarAuto.vue
+++ b/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>
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarHover.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarHover.vue
index 5d46b5c20..d6ad23871 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarHover.vue
+++ b/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>
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarImpl.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarImpl.vue
index d0f2bbcf6..47238249a 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarImpl.vue
+++ b/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"
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarScroll.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarScroll.vue
index 815ac8da8..3897a1bbf 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarScroll.vue
+++ b/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>
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarVisible.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarVisible.vue
index aabc7e81c..1730cfa46 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarVisible.vue
+++ b/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>
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarX.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarX.vue
index f5fd0cbe0..f7e0be681 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarX.vue
+++ b/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="{
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarY.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarY.vue
index bc0d709dd..78186bcff 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarY.vue
+++ b/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="{
diff --git a/packages/radix-vue/src/ScrollArea/__snapshots__/ScrollArea.test.ts.snap b/packages/radix-vue/src/ScrollArea/__snapshots__/ScrollArea.test.ts.snap
index 4d638980c..42612461a 100644
--- a/packages/radix-vue/src/ScrollArea/__snapshots__/ScrollArea.test.ts.snap
+++ b/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>"
 `;