From ce17c6d15f17db3f6efc80247998057de3808564 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Tue, 23 Jan 2024 14:01:05 +0100
Subject: [PATCH] Ensure `children` prop of `Field` component can be a render
 prop (#2941)

* ensure `children` prop can be a render prop

* update changelog
---
 packages/@headlessui-react/CHANGELOG.md       |  1 +
 .../src/components/field/field.test.tsx       | 19 +++++++++++++++++++
 .../src/components/field/field.tsx            |  8 +++++++-
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
index f98abbff1..52d371aab 100644
--- a/packages/@headlessui-react/CHANGELOG.md
+++ b/packages/@headlessui-react/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Expose `disabled` state on `<Tab />` component ([#2918](https://github.com/tailwindlabs/headlessui/pull/2918))
 - Prevent default behaviour when clicking outside of a `Dialog.Panel` ([#2919](https://github.com/tailwindlabs/headlessui/pull/2919))
 - Use `isFocused` instead of `isFocusVisible` for `Input` and `Textarea` components ([#2940](https://github.com/tailwindlabs/headlessui/pull/2940))
+- Ensure `children` prop of `Field` component can be a render prop ([#2941](https://github.com/tailwindlabs/headlessui/pull/2941))
 
 ## [2.0.0-alpha.4] - 2024-01-03
 
diff --git a/packages/@headlessui-react/src/components/field/field.test.tsx b/packages/@headlessui-react/src/components/field/field.test.tsx
index 0ec7dd2aa..d1c8b880f 100644
--- a/packages/@headlessui-react/src/components/field/field.test.tsx
+++ b/packages/@headlessui-react/src/components/field/field.test.tsx
@@ -14,6 +14,25 @@ describe('Rendering', () => {
     expect(container.firstChild).not.toHaveAttribute('aria-disabled', 'true')
   })
 
+  it('should render a `Field` component with a render prop', async () => {
+    let { container } = render(
+      <Field>
+        {(slot) => {
+          return (
+            <div data-slot={JSON.stringify(slot)}>
+              <input />
+            </div>
+          )
+        }}
+      </Field>
+    )
+
+    expect(container.querySelector('[data-slot]')?.getAttribute('data-slot')).toEqual(
+      JSON.stringify({ disabled: false })
+    )
+    expect(container.firstChild).not.toHaveAttribute('aria-disabled', 'true')
+  })
+
   it('should add `aria-disabled` when a `Field` is disabled', async () => {
     let { container } = render(
       <Field disabled>
diff --git a/packages/@headlessui-react/src/components/field/field.tsx b/packages/@headlessui-react/src/components/field/field.tsx
index 0a2221881..d770c162d 100644
--- a/packages/@headlessui-react/src/components/field/field.tsx
+++ b/packages/@headlessui-react/src/components/field/field.tsx
@@ -53,7 +53,13 @@ function FieldFn<TTag extends ElementType = typeof DEFAULT_FIELD_TAG>(
               ourProps,
               theirProps: {
                 ...theirProps,
-                children: <FormFieldsProvider>{theirProps.children}</FormFieldsProvider>,
+                children: (
+                  <FormFieldsProvider>
+                    {typeof theirProps.children === 'function'
+                      ? theirProps.children(slot)
+                      : theirProps.children}
+                  </FormFieldsProvider>
+                ),
               },
               slot,
               defaultTag: DEFAULT_FIELD_TAG,