Catalyst <Input /> component `onChange` handler is passed full event, not just the value as the docs show

[torra]

What component (if applicable) Catalyst Input component

• URL for category: https://catalyst.tailwindui.com/docs/input#controlled-component
• Component name: Input

Describe the bug When using the Catalyst component, if I copy the the example from the documentation, the rendered input component does not correctly update with the value the user types. Instead, it updates with [Object object], as it is casting a javascript Event object to a string.

To Reproduce Steps to reproduce the behavior:

1. Copy and paste the example usage of an component from: https://catalyst.tailwindui.com/docs/input#controlled-component
2. Start typing in the input box
3. Note that the component renders [object Object] rather than the string value you entered
4. Update the onChange handler to a function for debugging, like:

   const handleChange = (e) => {
   console.log(e);
   };

5. Set a breakpoint in the new handleChange function, and note that the value passed into the event handler is an Event object, not the string value as expected based on the documentation.

Expected behavior As the documentation shows, the expected behavior would be for the event handler to be passed the string value of event.target.value.

Screenshots Visual example of the problem:

Browser/Device (if applicable)

• OS: MacOS
• Browser Chrome
• Version 125.0.6422.76 (Official Build) (arm64)

Additional context I also have the same problem with the Textarea component (https://catalyst.tailwindui.com/docs/textarea#controlled-component), but other components, like Listbox and Switch, seem to work as expected from the docs.

[thecrypticace]

Ah whoops. Good catch. The Input, Select, and Textarea components use the event in their onChange handler rather than just the value so it's the docs that are incorrect here. I've corrected the examples in the docs.

Thanks for pointing this out! ✨

[torra]

Thanks! Appreciate the quick turnaround.