fix(input): readOnly and disabled within form field not being propagated

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()
+  })
 })

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) {

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,