From ca05e7c0ee843baa372632a79987150854b723fa Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Fri, 25 Apr 2025 12:46:52 +0200
Subject: [PATCH] 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
---
 packages/@headlessui-react/CHANGELOG.md       |  4 ++++
 .../src/components/label/label.tsx            |  2 +-
 playgrounds/react/pages/combinations/form.tsx | 20 ++++++++++++++++++-
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
index 86e612f..c53d878 100644
--- a/packages/@headlessui-react/CHANGELOG.md
+++ b/packages/@headlessui-react/CHANGELOG.md
@@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Add a quick trigger action to the `Menu`, `Listbox` and `Combobox` components ([#3700](https://github.com/tailwindlabs/headlessui/pull/3700))
 
+### Fixed
+
+- Fix clicking `Label` component should open `<Input type="file">` ([#3707](https://github.com/tailwindlabs/headlessui/pull/3707))
+
 ## [2.2.2] - 2025-04-17
 
 ### Fixed
diff --git a/packages/@headlessui-react/src/components/label/label.tsx b/packages/@headlessui-react/src/components/label/label.tsx
index edde216..fa294bb 100644
--- a/packages/@headlessui-react/src/components/label/label.tsx
+++ b/packages/@headlessui-react/src/components/label/label.tsx
@@ -166,7 +166,7 @@ function LabelFn<TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(
         // unchecked).
         if (
           (target instanceof HTMLInputElement &&
-            (target.type === 'radio' || target.type === 'checkbox')) ||
+            (target.type === 'file' || target.type === 'radio' || target.type === 'checkbox')) ||
           target.role === 'radio' ||
           target.role === 'checkbox' ||
           target.role === 'switch'
diff --git a/playgrounds/react/pages/combinations/form.tsx b/playgrounds/react/pages/combinations/form.tsx
index 8d951e4..0ba071a 100644
--- a/playgrounds/react/pages/combinations/form.tsx
+++ b/playgrounds/react/pages/combinations/form.tsx
@@ -1,4 +1,4 @@
-import { Combobox, Listbox, RadioGroup, Switch } from '@headlessui/react'
+import { Combobox, Field, Input, Label, Listbox, RadioGroup, Switch } from '@headlessui/react'
 import { useState } from 'react'
 import { Button } from '../../components/button'
 import { classNames } from '../../utils/class-names'
@@ -332,6 +332,24 @@ export default function App() {
               </Combobox>
             </div>
           </Section>
+          <Section title="Default form controls">
+            <Field className="flex flex-col p-1">
+              <Label>Label for {'<Input type="text">'}</Label>
+              <Input type="text" />
+            </Field>
+            <Field className="flex flex-col p-1">
+              <Label>Label for {'<Input type="checkbox">'}</Label>
+              <Input type="checkbox" />
+            </Field>
+            <Field className="flex flex-col p-1">
+              <Label>Label for {'<Input type="radio">'}</Label>
+              <Input type="radio" />
+            </Field>
+            <Field className="flex flex-col p-1">
+              <Label>Label for {'<Input type="file">'}</Label>
+              <Input type="file" />
+            </Field>
+          </Section>
         </div>
 
         <div className="space-x-4">