fix(design-system): binding in forms (#4970)

Talend · Nov 6, 2023 · 6816365 · 6816365
1 parent 5e39180
commit 6816365
Show file tree

Hide file tree

Showing 9 changed files with 26 additions and 6 deletions.
diff --git a/.changeset/nervous-plums-drop.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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