From 6816365dcf8fd6b63ce75325c9fa4397b8ab02ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Romain?= <sromain@talend.com>
Date: Mon, 6 Nov 2023 17:28:56 +0100
Subject: [PATCH] fix(design-system): binding in forms (#4970)

---
 .changeset/nervous-plums-drop.md                         | 5 +++++
 .../src/components/Form/Affix/variations/AffixSelect.tsx | 4 ++--
 .../src/components/Form/Field/Datalist/Datalist.tsx      | 3 +++
 .../src/components/Form/Field/Input/Input.Copy.tsx       | 2 ++
 .../src/components/Form/Field/Input/Input.File.tsx       | 9 ++++++++-
 .../src/components/Form/Field/Input/Input.tsx            | 4 ++--
 .../src/components/Form/Field/Select/Select.tsx          | 2 +-
 .../src/components/Form/Field/Textarea/Textarea.tsx      | 1 +
 .../src/components/Form/__snapshots__/Form.test.tsx.snap | 2 ++
 9 files changed, 26 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/nervous-plums-drop.md

diff --git a/.changeset/nervous-plums-drop.md b/.changeset/nervous-plums-drop.md
new file mode 100644
index 00000000000..f95b283f797
--- /dev/null
+++ b/.changeset/nervous-plums-drop.md
@@ -0,0 +1,5 @@
+---
+'@talend/design-system': patch
+---
+
+fix: binding in forms
diff --git a/packages/design-system/src/components/Form/Affix/variations/AffixSelect.tsx b/packages/design-system/src/components/Form/Affix/variations/AffixSelect.tsx
index 6f1115d2a0e..c33ad507758 100644
--- a/packages/design-system/src/components/Form/Affix/variations/AffixSelect.tsx
+++ b/packages/design-system/src/components/Form/Affix/variations/AffixSelect.tsx
@@ -15,7 +15,7 @@ const AffixSelect = forwardRef((props: AffixSelectPropsType, ref: Ref<HTMLSelect
 		const fieldID = useId(affixId, 'field-');
 
 		function AffixSelectComponent(
-			selectProps: Omit<SelectNoWrapperProps, 'hasError' | 'name' | 'children' | 'label'>,
+			selectProps: Omit<SelectNoWrapperProps, 'hasError' | 'children' | 'label'>,
 		) {
 			return (
 				<SelectNoWrapper id={fieldID} {...selectProps} isAffix isSuffix={isSuffix} ref={ref}>
@@ -25,7 +25,7 @@ const AffixSelect = forwardRef((props: AffixSelectPropsType, ref: Ref<HTMLSelect
 		}
 		return (
 			<FieldPrimitive label={label} name={name} id={fieldID} fieldId={fieldID} hideLabel>
-				<AffixSelectComponent {...rest} />
+				<AffixSelectComponent name={name} {...rest} />
 			</FieldPrimitive>
 		);
 	}
diff --git a/packages/design-system/src/components/Form/Field/Datalist/Datalist.tsx b/packages/design-system/src/components/Form/Field/Datalist/Datalist.tsx
index 1bcaae456b5..4a03dec6ce4 100644
--- a/packages/design-system/src/components/Form/Field/Datalist/Datalist.tsx
+++ b/packages/design-system/src/components/Form/Field/Datalist/Datalist.tsx
@@ -55,6 +55,9 @@ const Datalist = forwardRef(
 					<InputPrimitive
 						{...rest}
 						list={datalistListId}
+						name={name}
+						required={required}
+						hasError={hasError || false}
 						disabled={!!disabled}
 						readOnly={!!readOnly}
 						value={value}
diff --git a/packages/design-system/src/components/Form/Field/Input/Input.Copy.tsx b/packages/design-system/src/components/Form/Field/Input/Input.Copy.tsx
index 3728bb92ffe..d7c1585fffd 100644
--- a/packages/design-system/src/components/Form/Field/Input/Input.Copy.tsx
+++ b/packages/design-system/src/components/Form/Field/Input/Input.Copy.tsx
@@ -83,6 +83,8 @@ const InputCopy = forwardRef(
 				<InputPrimitive
 					{...rest}
 					id={inputId}
+					name={name}
+					required={required}
 					ref={inputRef}
 					value={value}
 					defaultValue={defaultValue}
diff --git a/packages/design-system/src/components/Form/Field/Input/Input.File.tsx b/packages/design-system/src/components/Form/Field/Input/Input.File.tsx
index 1ac1586f43c..bf9e468429b 100644
--- a/packages/design-system/src/components/Form/Field/Input/Input.File.tsx
+++ b/packages/design-system/src/components/Form/Field/Input/Input.File.tsx
@@ -193,7 +193,14 @@ const FieldFile = forwardRef(
 				hideLabel={hideLabel}
 				required={required}
 			>
-				<InputFile {...rest} id={fieldID} ref={ref} />
+				<InputFile
+					{...rest}
+					name={name}
+					required={required}
+					hasError={hasError || false}
+					id={fieldID}
+					ref={ref}
+				/>
 			</FieldPrimitive>
 		);
 	},
diff --git a/packages/design-system/src/components/Form/Field/Input/Input.tsx b/packages/design-system/src/components/Form/Field/Input/Input.tsx
index 8b6e420fba5..9bb1ce5e756 100644
--- a/packages/design-system/src/components/Form/Field/Input/Input.tsx
+++ b/packages/design-system/src/components/Form/Field/Input/Input.tsx
@@ -43,11 +43,11 @@ const Field = forwardRef((props: InputFieldProps, ref: Ref<HTMLInputElement>) =>
 			<InputPrimitive
 				{...rest}
 				id={fieldID}
+				name={name}
+				required={required}
 				type={type}
 				ref={ref}
 				hasError={hasError || false}
-				name={name}
-				required={required}
 			/>
 		</FieldPrimitive>
 	);
diff --git a/packages/design-system/src/components/Form/Field/Select/Select.tsx b/packages/design-system/src/components/Form/Field/Select/Select.tsx
index da881226bf5..22d0101e7e4 100644
--- a/packages/design-system/src/components/Form/Field/Select/Select.tsx
+++ b/packages/design-system/src/components/Form/Field/Select/Select.tsx
@@ -97,8 +97,8 @@ const Select = forwardRef((props: SelectProps, ref: Ref<HTMLSelectElement | HTML
 				defaultValue={defaultValue}
 				hasError={hasError || false}
 				name={name}
-				label={label}
 				required={required}
+				label={label}
 				id={fieldID}
 				{...rest}
 			/>
diff --git a/packages/design-system/src/components/Form/Field/Textarea/Textarea.tsx b/packages/design-system/src/components/Form/Field/Textarea/Textarea.tsx
index ebf486ccd30..d7833f54a7d 100644
--- a/packages/design-system/src/components/Form/Field/Textarea/Textarea.tsx
+++ b/packages/design-system/src/components/Form/Field/Textarea/Textarea.tsx
@@ -44,6 +44,7 @@ const Textarea = forwardRef((props: InputTextareaProps, ref: Ref<HTMLTextAreaEle
 				{...rest}
 				required={required}
 				id={fieldID}
+				name={name}
 				ref={ref}
 			/>
 		</FieldPrimitive>
diff --git a/packages/design-system/src/components/Form/__snapshots__/Form.test.tsx.snap b/packages/design-system/src/components/Form/__snapshots__/Form.test.tsx.snap
index 309bb9c8d7e..1887952bb60 100644
--- a/packages/design-system/src/components/Form/__snapshots__/Form.test.tsx.snap
+++ b/packages/design-system/src/components/Form/__snapshots__/Form.test.tsx.snap
@@ -115,6 +115,7 @@ exports[`Form should render a11y html 1`] = `
             <input
               class="theme-inputFile__input theme-input"
               id="field--mocked-uuid-3"
+              name="file"
               type="file"
             />
             <div
@@ -228,6 +229,7 @@ exports[`Form should render a11y html 1`] = `
         <textarea
           class="theme-textarea"
           id="field--mocked-uuid-8"
+          name="textarea"
         />
       </div>
       <div