Listbox (Select) - Reset value to default

[jakesteelman]

Hello! First off, thank you for these amazing prebuilt components with Headless UI and Tailwind UI. I've purchased and been using the latter to speed up my workflow and it's helped drastically, so thanks again for that. I'm also new to React (about 4 months of experience) and have usually been a lurker on StackOverflow and Github.

I'm building a form that has a few text inputs and a few Listboxes from Headless UI. I built a custom component wrapping the Listbox component to prevent long and messy code. In the parent component, I have a basic HTML form wrapping multiple of those Listbox components and multiple basic text input fields.

In the parent component with the form, I have a rest button, which should reset all the fields in the form. I have a ref to the form element, and when the Reset button is pressed, it just calls the formRef.current.reset() method. It works fine, and resets the text inputs, but doesn't work on the Listboxes. I understand this is because the custom Listbox component is not rendering a "select" element.

Is there any way that I can reset the value of the Listboxes (which are child components of my main form component) to the initial value I assigned to them? Ideally, if it's possible to tie that in with the formRef.current.reset() method that would be awesome. I've looked into ref forwarding but don't exactly know how to implement that with this particular component, or if it would even be worth it.

My listbox components are essentially the same component that's on the Headless UI website. For props, I'm passing the component a name, an array of possible items, an initial index, and a callback to fetch the current value, which is stored in state.

Any help would be greatly appreciated, thank you!

[BensThoughts]

I'm struggling with this same thing. Using remix and need to know how to reset the select menus to their defaultValue, I managed to do this by using external state (useState) and the "value" prop, but the ui didn't update until I clicked on the select menu, at which point it popped from whatever it was on to the default.

[tobeycodes]

#1950