Files
headlessui/packages
Robin Malfait ca05e7c0ee Fix clicking <Label /> opens <input type="file"> (#3707)
This PR fixes an issue where the `<Label>` component didn't open the
`<input type="file">` when clicking it.

For native elements, the `Label` component already renders a native
`<label>` behind the scenes. Some native elements like `<input
type="checkbox">` immediately change the state of the element whereas
some other elements don't such as `<select></select>` you just get the
focus.

However, `<input type="file">` should also immediately open the file
picker when clicking the label and this was not the case. This PR fixes
that.

Since we are already using a native `<label>` _and_ linking the
`<label>` with its `<input type="file">` performing a `.click()` is
allowed.

Fixes: #3680


## Test plan

You can play with it here:
https://headlessui-react-git-fix-issue-3680-tailwindlabs.vercel.app/combinations/form

This video shows how it behaves now:


https://github.com/user-attachments/assets/26467f83-d91d-4a79-98f9-dd91214ea037
2025-04-25 12:46:52 +02:00
..
2025-04-17 15:21:29 +02:00