radix-vue / shadcn-vue

Vue port of shadcn-ui
https://www.shadcn-vue.com/
MIT License
4.55k stars 261 forks source link

[Feature]: Command component highlighted value on change callback #635

Closed HuakunShen closed 2 months ago

HuakunShen commented 3 months ago

Describe the feature

It seems like the current command component doesn't support highlighted value on change callback.

e.g. get highlighted item when pressing up and down arrow to switch between the items.

The react shadcn provides a onValueChange props callback, implemented with cmdk.

Shadcn-vue's underlying ComboboxRoot from radix-vue doesn't provide this option.

https://github.com/radix-vue/radix-vue/issues/744

Additional information

yakir-reznik commented 2 months ago

i'm not quite sure how to implement this feature but if you need a quick and easy solution i would suggest you wrap the component with your own

and use a mutation observer to detect when the highlighted child changes. Highlighted children have a "data-highlighted" attribute on them.

HuakunShen commented 2 months ago

My PR https://github.com/radix-vue/radix-vue/pull/1048 implemented this feature in radix-vue. It's published in radix-vue v1.9.0. For now I replace shadcn's radix-vue dependency verison with v1.9.0. Shadcn-vue just need to upgrade its default radix-vue version to v1.9.0