fix(Select, Combobox): prevent override default boolean prop value wi…

…th useForwardProps (#610) * fix: prevent override default prop value with useForwardProps * fix: update * fix: forwardProps in `ComboboxContentImpl.vue`
radix-vue · Jan 16, 2024 · cd33af8 · cd33af8
1 parent 9627e2d
commit cd33af8
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 7 deletions.
diff --git a/packages/radix-vue/src/Combobox/ComboboxContentImpl.vue b/packages/radix-vue/src/Combobox/ComboboxContentImpl.vue
@@ -3,6 +3,7 @@ import type { Ref } from 'vue'
 import {
   createContext,
   useBodyScrollLock,
+  useForwardProps,
   useHideOthers,
 } from '@/shared'
 
@@ -56,6 +57,8 @@ const pickedProps = computed(() => {
   else return {}
 })
 
+const forwardedProps = useForwardProps(pickedProps.value)
+
 function handleLeave(ev: PointerEvent) {
   rootContext.onSelectedValueChange('')
 }
@@ -102,7 +105,7 @@ provideComboboxContentContext({ position })
     >
       <component
         :is="position === 'popper' ? PopperContent : Primitive "
-        v-bind="{ ...$attrs, ...pickedProps }"
+        v-bind="{ ...$attrs, ...forwardedProps }"
         :id="rootContext.contentId"
         ref="primitiveElement"
         role="listbox"

diff --git a/packages/radix-vue/src/Select/SelectContent.vue b/packages/radix-vue/src/Select/SelectContent.vue
@@ -27,10 +27,8 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const props = withDefaults(defineProps<SelectContentProps>(), {
-  align: 'start',
-  position: 'item-aligned',
-})
+const props = defineProps<SelectContentProps>()
+
 const emits = defineEmits<SelectContentEmits>()
 const forwarded = useForwardPropsEmits(props, emits)
 

diff --git a/packages/radix-vue/src/Select/SelectContentImpl.vue b/packages/radix-vue/src/Select/SelectContentImpl.vue
@@ -10,6 +10,7 @@ import {
   useBodyScrollLock,
   useCollection,
   useFocusGuards,
+  useForwardProps,
   useHideOthers,
   useTypeahead,
 } from '@/shared'
@@ -80,7 +81,10 @@ import { FocusScope } from '@/FocusScope'
 import { DismissableLayer } from '@/DismissableLayer'
 import { focusFirst } from '@/Menu/utils'
 
-const props = defineProps<SelectContentImplProps>()
+const props = withDefaults(defineProps<SelectContentImplProps>(), {
+  align: 'start',
+  position: 'item-aligned',
+})
 const emits = defineEmits<SelectContentImplEmits>()
 
 const rootContext = injectSelectRootContext()
@@ -190,6 +194,8 @@ const pickedProps = computed(() => {
   else return {}
 })
 
+const forwardedProps = useForwardProps(pickedProps.value)
+
 provideSelectContentContext({
   content,
   viewport,
@@ -254,7 +260,7 @@ provideSelectContentContext({
             ? SelectPopperPosition
             : SelectItemAlignedPosition
         "
-        v-bind="{ ...$attrs, ...pickedProps }"
+        v-bind="{ ...$attrs, ...forwardedProps }"
         :id="rootContext.contentId"
         :ref="
           (vnode: ComponentPublicInstance) => {