Skip to content

feat(Select/Listbox/Combobox/Menu/ContextMenu/DropdownMenu/Menubar/ColorSwatchPicker): add slot prop to *Item and forceMount to *ItemIndicator #2562

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kricsleo wants to merge 2 commits into
base: v2
Choose a base branch
from
Open

feat(Select/Listbox/Combobox/Menu/ContextMenu/DropdownMenu/Menubar/ColorSwatchPicker): add slot prop to *Item and forceMount to *ItemIndicator #2562

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dbd6103
feat(Select): add `selected` slot prop to `SelectItem` and `forceMoun…
kricsleo Apr 1, 2026
750d77d
feat: add slot props/`forceMount` for more components
kricsleo Apr 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion packages/core/src/ColorSwatchPicker/ColorSwatchPickerItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,11 +50,12 @@ provideColorSwatchPickerItemContext({

<template>
<ListboxItem
v-slot="slotProps"
v-bind="forwarded"
:aria-label="colorLabel"
:data-color="value"
:style="{ '--reka-color-swatch-picker-item-color': value }"
>
<slot />
<slot v-bind="slotProps" />
</ListboxItem>
</template>
12 changes: 11 additions & 1 deletion packages/core/src/Combobox/ComboboxItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,13 @@ import { ListboxItem } from '@/Listbox'
const props = defineProps<ComboboxItemProps<T>>()
const emits = defineEmits<ComboboxItemEmits<T>>()

defineSlots<{
default?: (props: {
/** Whether the item is currently selected */
selected: boolean
}) => any
}>()

const id = useId(undefined, 'reka-combobox-item')
const rootContext = injectComboboxRootContext()
const groupContext = injectComboboxGroupContext(null)
Expand Down Expand Up @@ -80,6 +87,7 @@ onUnmounted(() => {
v-bind="props"
:id="id"
ref="primitiveElement"
v-slot="slotProps"
:disabled="rootContext.disabled.value || disabled"
@select="(event) => {
emits('select', event as any)
Expand All @@ -93,6 +101,8 @@ onUnmounted(() => {
}
}"
>
<slot>{{ value }}</slot>
<slot v-bind="slotProps">
{{ value }}
</slot>
</ListboxItem>
</template>
7 changes: 5 additions & 2 deletions packages/core/src/ContextMenu/ContextMenuCheckboxItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,10 @@ useForwardExpose()
</script>

<template>
<MenuCheckboxItem v-bind="{ ...props, ...emitsAsProps }">
<slot />
<MenuCheckboxItem
v-slot="slotProps"
v-bind="{ ...props, ...emitsAsProps }"
>
<slot v-bind="slotProps" />
</MenuCheckboxItem>
</template>
7 changes: 5 additions & 2 deletions packages/core/src/ContextMenu/ContextMenuRadioItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,10 @@ useForwardExpose()
</script>

<template>
<MenuRadioItem v-bind="{ ...props, ...emitsAsProps }">
<slot />
<MenuRadioItem
v-slot="slotProps"
v-bind="{ ...props, ...emitsAsProps }"
>
<slot v-bind="slotProps" />
</MenuRadioItem>
</template>
7 changes: 5 additions & 2 deletions packages/core/src/DropdownMenu/DropdownMenuCheckboxItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,10 @@ useForwardExpose()
</script>

<template>
<MenuCheckboxItem v-bind="{ ...props, ...emitsAsProps }">
<slot />
<MenuCheckboxItem
v-slot="slotProps"
v-bind="{ ...props, ...emitsAsProps }"
>
<slot v-bind="slotProps" />
</MenuCheckboxItem>
</template>
7 changes: 5 additions & 2 deletions packages/core/src/DropdownMenu/DropdownMenuRadioItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,10 @@ useForwardExpose()
</script>

<template>
<MenuRadioItem v-bind="forwarded">
<slot />
<MenuRadioItem
v-slot="slotProps"
v-bind="forwarded"
>
<slot v-bind="slotProps" />
</MenuRadioItem>
</template>
9 changes: 8 additions & 1 deletion packages/core/src/Listbox/ListboxItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,13 @@ const props = withDefaults(defineProps<ListboxItemProps<T>>(), {
})
const emits = defineEmits<ListboxItemEmits<T>>()

defineSlots<{
default?: (props: {
/** Whether the item is currently selected */
selected: boolean
}) => any
}>()

const id = useId(undefined, 'reka-listbox-item')
const { CollectionItem } = useCollection()
const { forwardRef, currentElement } = useForwardExpose()
Expand Down Expand Up @@ -96,7 +103,7 @@ provideListboxItemContext({
rootContext.changeHighlight(currentElement, false)
}"
>
<slot />
<slot :selected="isSelected" />
</Primitive>
</CollectionItem>
</template>
27 changes: 18 additions & 9 deletions packages/core/src/Listbox/ListboxItemIndicator.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,36 @@
import type { PrimitiveProps } from '@/Primitive'
import { useForwardExpose } from '@/shared'

export interface ListboxItemIndicatorProps extends PrimitiveProps {}
export interface ListboxItemIndicatorProps extends PrimitiveProps {
/**
* Used to force mounting when more control is needed. Useful when
* controlling animation with Vue animation libraries.
*/
forceMount?: boolean
}
</script>

<script setup lang="ts">
import { Presence } from '@/Presence'
import { Primitive } from '@/Primitive'
import { injectListboxItemContext } from './ListboxItem.vue'

const props = withDefaults(defineProps<ListboxItemIndicatorProps>(), {
as: 'span',
})

useForwardExpose()
const { forwardRef } = useForwardExpose()
const itemContext = injectListboxItemContext()
</script>

<template>
<Primitive
v-if="itemContext.isSelected.value"
aria-hidden="true"
v-bind="props"
>
<slot />
</Primitive>
<Presence :present="forceMount || itemContext.isSelected.value">
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Apr 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "1) Confirm Presence accepts separate 'present' and 'forceMount' props:"
sed -n '1,120p' packages/core/src/Presence/Presence.ts

echo
echo "2) Find indicator usages that fold forceMount into :present:"
rg -n --type=vue ':present="[^"]*forceMount[^"]*"' packages/core/src

echo
echo "3) Find usages that pass :force-mount explicitly:"
rg -n --type=vue ':force-mount=' packages/core/src

Repository: unovue/reka-ui

Length of output: 3102

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "1) Read ListboxItemIndicator.vue to verify line 28:"
cat -n packages/core/src/Listbox/ListboxItemIndicator.vue | sed -n '20,35p'

echo
echo "2) Search for :present with forceMount pattern (without file type restriction):"
rg -n ':present="[^"]*forceMount' packages/core/src --type-add 'vue:*.vue'

echo
echo "3) Check if forceMount prop is available in ListboxItemIndicator:"
rg -n 'forceMount' packages/core/src/Listbox/ListboxItemIndicator.vue

echo
echo "4) Check other :present usages in Listbox components:"
rg -n ':present=' packages/core/src/Listbox/ --type-add 'vue:*.vue'

Repository: unovue/reka-ui

Length of output: 3353

Pass forceMount to Presence as a separate prop.

The Presence component explicitly supports separate present and forceMount props to distinguish between conditional rendering (state-based) and forced rendering (programmatic control). Combining them into a single :present="forceMount || itemContext.isSelected.value" masks this distinction and prevents Presence from handling animations/transitions correctly.

Proposed fix 
-  <Presence :present="forceMount || itemContext.isSelected.value">
+  <Presence
+    :present="itemContext.isSelected.value"
+    :force-mount="forceMount"
+  >

Note: This pattern appears across 23+ components in the codebase (Toast, Tooltip, Tabs, ScrollArea, RadioGroup, Popover, Menu, NavigationMenu, HoverCard, Dialog, Select, Checkbox, Collapsible, Combobox, etc.). Consider applying this fix systematically across all affected components.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<Presence :present="forceMount || itemContext.isSelected.value">
<Presence
:present="itemContext.isSelected.value"
:force-mount="forceMount"
>
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@packages/core/src/Listbox/ListboxItemIndicator.vue` at line 28, The Presence
prop binding mixes forced and state-driven mounting; change the Presence usage
in ListboxItemIndicator.vue to pass present and forceMount separately by setting
:present="itemContext.isSelected.value" and :forceMount="forceMount" so Presence
can correctly handle transitions; locate the Presence element (currently using
:present="forceMount || itemContext.isSelected.value") and replace the
expression with the two props, and apply the same pattern to other components
using the same combined expression (e.g., Toast, Tooltip, Tabs, RadioGroup,
Popover, Menu, HoverCard, Dialog, Select, Checkbox, Collapsible, Combobox).

<Primitive
:ref="forwardRef"
aria-hidden="true"
v-bind="props"
>
<slot />
</Primitive>
</Presence>
</template>
8 changes: 7 additions & 1 deletion packages/core/src/Menu/MenuRadioItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,12 @@ import { getCheckedState } from './utils'
const props = defineProps<MenuRadioItemProps>()
const emits = defineEmits<MenuRadioItemEmits>()

defineSlots<{
default?: (props: {
/** Current checked state */
checked: boolean
}) => any
}>()
const delegatedProps = reactiveOmit(props, ['value'])
const forwarded = useForwardProps(delegatedProps)

Expand All @@ -50,6 +56,6 @@ provideMenuItemIndicatorContext({ modelValue })
}
"
>
<slot />
<slot :checked="modelValue" />
</MenuItem>
</template>
7 changes: 5 additions & 2 deletions packages/core/src/Menubar/MenubarCheckboxItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,10 @@ useForwardExpose()
</script>

<template>
<MenuCheckboxItem v-bind="{ ...props, ...emitsAsProps }">
<slot />
<MenuCheckboxItem
v-slot="slotProps"
v-bind="{ ...props, ...emitsAsProps }"
>
<slot v-bind="slotProps" />
</MenuCheckboxItem>
</template>
7 changes: 5 additions & 2 deletions packages/core/src/Menubar/MenubarRadioItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,10 @@ useForwardExpose()
</script>

<template>
<MenuRadioItem v-bind="forwarded">
<slot />
<MenuRadioItem
v-slot="slotProps"
v-bind="forwarded"
>
<slot v-bind="slotProps" />
</MenuRadioItem>
</template>
4 changes: 2 additions & 2 deletions packages/core/src/Select/SelectItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,15 +169,15 @@ provideSelectItemContext({
@focus="isFocused = true"
@blur="isFocused = false"
@pointerup="handleSelectCustomEvent"
@pointerdown="(event) => {
@pointerdown="(event: PointerEvent) => {
(event.currentTarget as HTMLElement).focus({ preventScroll: true })
}"
@touchend.prevent.stop
@pointermove="handlePointerMove"
@pointerleave="handlePointerLeave"
@keydown="handleKeyDown"
>
<slot />
<slot :selected="isSelected" />
Comment thread
kricsleo marked this conversation as resolved.
</Primitive>
</CollectionItem>
</template>
27 changes: 19 additions & 8 deletions packages/core/src/Select/SelectItemIndicator.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,37 @@
<script lang="ts">
import type { PrimitiveProps } from '@/Primitive'
import { useForwardExpose } from '@/shared'

export interface SelectItemIndicatorProps extends PrimitiveProps {}
export interface SelectItemIndicatorProps extends PrimitiveProps {
/**
* Used to force mounting when more control is needed. Useful when
* controlling animation with Vue animation libraries.
*/
forceMount?: boolean
}
</script>

<script setup lang="ts">
import { Presence } from '@/Presence'
import { Primitive } from '@/Primitive'
import { injectSelectItemContext } from './SelectItem.vue'

const props = withDefaults(defineProps<SelectItemIndicatorProps>(), {
as: 'span',
})

const { forwardRef } = useForwardExpose()
const itemContext = injectSelectItemContext()
</script>

<template>
<Primitive
v-if="itemContext.isSelected.value"
aria-hidden="true"
v-bind="props"
>
<slot />
</Primitive>
<Presence :present="forceMount || itemContext.isSelected.value">
<Primitive
:ref="forwardRef"
aria-hidden="true"
v-bind="props"
>
<slot />
</Primitive>
</Presence>
</template>
Loading