Vue combobox value property is not reactive

[johannesspohr]

Description

When I have a controlled Combobox in Vue, it does not react to changes in the input value.

Link to Reproduction (or Detailed Explanation)

https://codesandbox.io/p/devbox/slgfxp

Steps to Reproduce

Click "Set to React button", but the value will not change

Ark UI Version

4.8.0

Framework

• React
• Solid
• Vue

Browser

Google Chrome

Additional Information

No response

[carwack]

If you would like to control the Combobox from outside like in the example with a button. I would suggest using the Combobox.RootProvider.

The RootProvider component provides a context for the combobox. It accepts the value of the useCombobox hook. You can leverage it to access the component state and methods from outside the combobox.

I forked your Codesandbox with an example: https://codesandbox.io/p/devbox/autumn-brook-forked-w547ff

@cschroeter would it make sense to be able to use 2 way binding, v-model, on the Root component instead of having to use the RootProvider?

[johannesspohr]

I guess my confusion came from the fact, that there is value and initialValue as properties, which wouldn't really make sense when the value is also not reactive. Also for the usage with form libraries, being able to set the state and have the component react would be very convenient.
I will update my case to use the RootProvider then. Thanks for the help!

[carwack]

Yes I understand that it's a bit confusing in the docs. But I would recommend using the RootProvider for now 😊
It's an interesting use case to try it with form libraries like VeeValidate for example. I will try to create a Sandbox example asap to see how easy it goes.