Expose useFieldArray replace and append methods in ExpandableInput to parent components

[basseche]

PR Summary

Expose useFieldArray replace and append methods in ExpandableInput to parent components
so it state can be updated correctly

[coderabbitai]

📝 Walkthrough

Walkthrough

The ExpandableInput component is refactored from a plain function export to a forwardRef-based component. It now exposes an imperative API via useImperativeHandle with replaceItems(newItems) and appendItem(newItem) methods, leveraging the replace method from useFieldArray. The existing render tree and click-to-remove behavior remain unchanged.

Changes

Cohort / File(s)	Summary
ExpandableInput Component Refactoring src/components/inputs/reactHookForm/expandableInput/ExpandableInput.tsx	Converted to forwardRef component with imperative API. Exposes replaceItems() and appendItem() methods via useImperativeHandle. Integrates replace method from useFieldArray hook. Existing UI behavior preserved.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: converting ExpandableInput to a forwardRef component that exposes useFieldArray's replace and append methods to parent components.
Description check	✅ Passed	The description is related to the changeset and explains the purpose of exposing the useFieldArray methods, though it contains a minor typo ('so it state' should be 'so its state').
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/components/inputs/reactHookForm/expandableInput/ExpandableInput.tsx (1)

33-33: ⚠️ Potential issue | 🟡 Minor

Guard against appending undefined when initialValue is not provided.

initialValue is optional (Line 33), but Line 110 always calls append(initialValue). Since the component's public API allows omitting initialValue, passing undefined to append() will add undefined into the field array.

Proposed guard

-                        onClick={() => append(initialValue)}
+                        onClick={() => {
+                            if (initialValue === undefined) {
+                                return;
+                            }
+                            append(initialValue);
+                        }}

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/inputs/reactHookForm/expandableInput/ExpandableInput.tsx` at
line 33, ExpandableInput's optional prop initialValue can be undefined but the
component unconditionally calls append(initialValue) (useFieldArray.append),
which will add undefined to the field array; update ExpandableInput so you only
call append when a real value exists (e.g. if (initialValue !== undefined)
append(initialValue)) or provide a safe default (e.g. append(initialValue ?? {})
depending on the expected type). Locate the append(...) invocation in the
ExpandableInput component and wrap it with a guard or substitute a sensible
default to prevent appending undefined.

🧹 Nitpick comments (1)

src/components/inputs/reactHookForm/expandableInput/ExpandableInput.tsx (1)

47-63: Type and export the imperative ref contract.

Line 48 and lines 76-77 currently leave the new parent API effectively untyped (ref/any), which makes replaceItems and appendItem easy to misuse from consumers. This is inconsistent with other properly-typed forwardRef components in the codebase (e.g., CustomAGGrid).

Proposed typed ref handle

+export interface ExpandableInputHandle<TItem = unknown> {
+    replaceItems: (newItems: TItem[]) => void;
+    appendItem: (newItem: TItem) => void;
+}
+
-export const ExpandableInput = forwardRef(
+export const ExpandableInput = forwardRef<ExpandableInputHandle, Readonly<ExpandableInputProps>>(
     (
         {
@@
             alignItems = 'stretch', // default value for a flex container
             watchProps = true,
             disabled = false,
             disabledDeletion,
         }: Readonly<ExpandableInputProps>,
-        ref
+        ref
     ) => {
         const {
             fields: values,
             append,
             remove,
             replace,
         } = useFieldArray({
             name,
         });
 
         useImperativeHandle(
             ref,
             () => ({
-                replaceItems: (newItems: any) => replace(newItems),
-                appendItem: (newItem: any) => append(newItem),
+                replaceItems: (newItems) => replace(newItems),
+                appendItem: (newItem) => append(newItem),
             }),
             [append, replace]
         );

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/inputs/reactHookForm/expandableInput/ExpandableInput.tsx`
around lines 47 - 63, The component ExpandableInput currently accepts an untyped
ref (ref: any) which allows misuse of its imperative methods like replaceItems
and appendItem; define and export a typed ref interface (e.g.,
ExpandableInputHandle) listing the public methods (replaceItems, appendItem,
etc.), update the component signature to use forwardRef<ExpandableInputHandle,
ExpandableInputProps> and type the ref parameter accordingly, and ensure any
internal use of the ref is cast/annotated to that interface so consumers get
proper TypeScript autocompletion and type-safety when calling replaceItems and
appendItem.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@src/components/inputs/reactHookForm/expandableInput/ExpandableInput.tsx`:
- Line 33: ExpandableInput's optional prop initialValue can be undefined but the
component unconditionally calls append(initialValue) (useFieldArray.append),
which will add undefined to the field array; update ExpandableInput so you only
call append when a real value exists (e.g. if (initialValue !== undefined)
append(initialValue)) or provide a safe default (e.g. append(initialValue ?? {})
depending on the expected type). Locate the append(...) invocation in the
ExpandableInput component and wrap it with a guard or substitute a sensible
default to prevent appending undefined.

---

Nitpick comments:
In `@src/components/inputs/reactHookForm/expandableInput/ExpandableInput.tsx`:
- Around line 47-63: The component ExpandableInput currently accepts an untyped
ref (ref: any) which allows misuse of its imperative methods like replaceItems
and appendItem; define and export a typed ref interface (e.g.,
ExpandableInputHandle) listing the public methods (replaceItems, appendItem,
etc.), update the component signature to use forwardRef<ExpandableInputHandle,
ExpandableInputProps> and type the ref parameter accordingly, and ensure any
internal use of the ref is cast/annotated to that interface so consumers get
proper TypeScript autocompletion and type-safety when calling replaceItems and
appendItem.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 62e35ede-fbc0-46a4-9acb-aaaa7db8d2dc

📥 Commits

Reviewing files that changed from the base of the PR and between f5f2820 and 7e9bcbb.

📒 Files selected for processing (1)

• src/components/inputs/reactHookForm/expandableInput/ExpandableInput.tsx