From 1d5f425e32218403ac3e04e7cf308657132ef723 Mon Sep 17 00:00:00 2001
From: Powerplex <julien.bonnin.dev@gmail.com>
Date: Tue, 21 Nov 2023 16:39:52 +0100
Subject: [PATCH] fix(input): derivate input state from formField when possible

---
 .../components/input/src/Input.stories.tsx    |  4 ++-
 packages/components/input/src/InputGroup.tsx  | 29 ++++++++++++-------
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/packages/components/input/src/Input.stories.tsx b/packages/components/input/src/Input.stories.tsx
index 1bbe3bd8c..c5a8c8a6f 100644
--- a/packages/components/input/src/Input.stories.tsx
+++ b/packages/components/input/src/Input.stories.tsx
@@ -437,7 +437,9 @@ export const FieldInvalid: StoryFn = _args => {
     <FormField name="title" state="error">
       <FormField.Label>Title</FormField.Label>
 
-      <Input defaultValue="adevinta.com" />
+      <InputGroup>
+        <Input defaultValue="adevinta.com" />
+      </InputGroup>
 
       <FormField.ErrorMessage>The URL is invalid</FormField.ErrorMessage>
     </FormField>
diff --git a/packages/components/input/src/InputGroup.tsx b/packages/components/input/src/InputGroup.tsx
index 9fd01281d..7bae0ff19 100644
--- a/packages/components/input/src/InputGroup.tsx
+++ b/packages/components/input/src/InputGroup.tsx
@@ -58,7 +58,6 @@ export const InputGroup = forwardRef<HTMLDivElement, PropsWithChildren<InputGrou
       | undefined
     const props = input?.props || {}
 
-    const field = useFormFieldControl()
     const inputRef = useRef<HTMLInputElement>(null!)
     const onClearRef = useRef(onClear)
     const ref = useMergeRefs<HTMLInputElement>(input?.ref, inputRef)
@@ -67,19 +66,27 @@ export const InputGroup = forwardRef<HTMLDivElement, PropsWithChildren<InputGrou
       props.defaultValue as string,
       props.onValueChange
     )
+
+    // Data derivated from FormField context
+    const field = useFormFieldControl()
     const state = field.state ?? stateProp
+    const disabled = field.disabled || !!disabledProp
+    const readOnly = field.readOnly || !!readOnlyProp
+
+    // InputGroup elements (in visual order)
     const leadingAddon = findElement('LeadingAddon')
     const leadingIcon = findElement('LeadingIcon')
     const clearButton = findElement('ClearButton')
+    const trailingIcon = state
+      ? findElement('StateIndicator') || <InputStateIndicator />
+      : findElement('TrailingIcon')
     const trailingAddon = findElement('TrailingAddon')
-    const stateIndicator = findElement('StateIndicator') || <InputStateIndicator />
-    const trailingIcon = state ? stateIndicator : findElement('TrailingIcon')
+
+    // Acknowledge which subComponents are used in the compound context
     const hasLeadingAddon = !!leadingAddon
     const hasTrailingAddon = !!trailingAddon
     const hasLeadingIcon = !!leadingIcon
     const hasTrailingIcon = !!trailingIcon || !!state
-    const disabled = field.disabled || !!disabledProp
-    const readOnly = field.readOnly || !!readOnlyProp
     const hasClearButton = !!value && !!clearButton && !disabled && !readOnly
 
     const handleChange: ChangeEventHandler<HTMLInputElement> = event => {
@@ -102,9 +109,9 @@ export const InputGroup = forwardRef<HTMLDivElement, PropsWithChildren<InputGrou
 
     const current = useMemo(() => {
       return {
-        state: stateProp,
-        disabled: !!disabledProp,
-        readOnly: !!readOnlyProp,
+        state,
+        disabled,
+        readOnly,
         hasLeadingIcon,
         hasTrailingIcon,
         hasLeadingAddon,
@@ -113,9 +120,9 @@ export const InputGroup = forwardRef<HTMLDivElement, PropsWithChildren<InputGrou
         onClear: handleClear,
       }
     }, [
-      stateProp,
-      disabledProp,
-      readOnlyProp,
+      state,
+      disabled,
+      readOnly,
       hasLeadingIcon,
       hasTrailingIcon,
       hasLeadingAddon,