From 936dc4dabd9c2105a0b1915e7d07cac9356c6904 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Alvarez=20Sordo?= <a.alvarez.sor@gmail.com>
Date: Mon, 28 Aug 2023 09:40:43 +0200
Subject: [PATCH] fix(input): readOnly and disabled within form field not being
 propagated

---
 packages/components/input/src/Input.test.tsx | 52 ++++++++++++++++++++
 packages/components/input/src/Input.tsx      |  6 +--
 packages/components/input/src/InputGroup.tsx | 12 ++---
 3 files changed, 61 insertions(+), 9 deletions(-)

diff --git a/packages/components/input/src/Input.test.tsx b/packages/components/input/src/Input.test.tsx
index fbc35c8a2..80a8f73fd 100644
--- a/packages/components/input/src/Input.test.tsx
+++ b/packages/components/input/src/Input.test.tsx
@@ -95,6 +95,30 @@ describe('Input', () => {
     expect(screen.getByText(rightText)).toBeInTheDocument()
   })
 
+  it('should be read only when group is read only', () => {
+    const placeholder = 'Smartphone'
+
+    render(
+      <InputGroup readOnly>
+        <Input placeholder={placeholder} />
+      </InputGroup>,
+    )
+
+    expect(screen.getByPlaceholderText(placeholder)).toHaveAttribute('readOnly')
+  })
+
+  it('should be disabled when group is disabled', () => {
+    const placeholder = 'Smartphone'
+
+    render(
+      <InputGroup disabled>
+        <Input placeholder={placeholder} />
+      </InputGroup>,
+    )
+
+    expect(screen.getByPlaceholderText(placeholder)).toBeDisabled()
+  })
+
   it('should render icons within group', () => {
     const leftLabel = 'Check'
     const rightLabel = 'Euro'
@@ -354,4 +378,32 @@ describe('Input', () => {
     expect(inputEl).toBeInvalid()
     expect(inputEl).toHaveAccessibleDescription(errorText)
   })
+
+  it('should be read only when field is read only', () => {
+    const label = 'Title'
+
+    render(
+      <FormField readOnly>
+        <FormField.Label>{label}</FormField.Label>
+
+        <Input />
+      </FormField>,
+    )
+
+    expect(screen.getByLabelText(label)).toHaveAttribute('readOnly')
+  })
+
+  it('should be disabled when field is disabled', () => {
+    const label = 'Title'
+
+    render(
+      <FormField disabled>
+        <FormField.Label>{label}</FormField.Label>
+
+        <Input />
+      </FormField>,
+    )
+
+    expect(screen.getByLabelText(label)).toBeDisabled()
+  })
 })
diff --git a/packages/components/input/src/Input.tsx b/packages/components/input/src/Input.tsx
index 128505414..3c52a711b 100644
--- a/packages/components/input/src/Input.tsx
+++ b/packages/components/input/src/Input.tsx
@@ -44,9 +44,9 @@ const Root = forwardRef<HTMLInputElement, InputProps>(
       onClear,
     } = group
     const Component = asChild ? Slot : 'input'
-    const state = field.state ?? group.state
-    const disabled = group.disabled ?? disabledProp
-    const readOnly = group.readOnly ?? readOnlyProp
+    const state = field.state || group.state
+    const disabled = field.disabled || group.disabled || disabledProp
+    const readOnly = field.readOnly || group.readOnly || readOnlyProp
 
     const handleChange: ChangeEventHandler<HTMLInputElement> = event => {
       if (onChange) {
diff --git a/packages/components/input/src/InputGroup.tsx b/packages/components/input/src/InputGroup.tsx
index 691e9b8ab..7a5aa6acf 100644
--- a/packages/components/input/src/InputGroup.tsx
+++ b/packages/components/input/src/InputGroup.tsx
@@ -102,9 +102,9 @@ export const InputGroup = forwardRef<HTMLDivElement, PropsWithChildren<InputGrou
 
     const current = useMemo(() => {
       return {
-        state,
-        disabled,
-        readOnly,
+        state: stateProp,
+        disabled: !!disabledProp,
+        readOnly: !!readOnlyProp,
         hasLeadingIcon,
         hasTrailingIcon,
         hasLeadingAddon,
@@ -113,9 +113,9 @@ export const InputGroup = forwardRef<HTMLDivElement, PropsWithChildren<InputGrou
         onClear: handleClear,
       }
     }, [
-      state,
-      disabled,
-      readOnly,
+      stateProp,
+      disabledProp,
+      readOnlyProp,
       hasLeadingIcon,
       hasTrailingIcon,
       hasLeadingAddon,