add custom name for input to avoid rgaa issue in case of multiple form with same fields

Author: quentinovega

src/form/basicWrapper.tsx

@@ -47,7 +47,7 @@ export const BasicWrapper = ({ entry, realEntry, children, render, functionalPro
 
   return (
     <div className={`mrf-mt_10  ${className || ""}`} style={{ position: 'relative' }}>
-      {computedLabel && <label className='mrf-flex mrf-ai_center mrf-mb_5' htmlFor={entry}>
+      {computedLabel && <label className='mrf-flex mrf-ai_center mrf-mb_5' htmlFor={step?.name ?? entry}>
         <span>{computedLabel}</span>
         {step?.help && <>
           <ReactToolTip html={true} place={'bottom'} id={id} />

src/form/controlledInput.tsx

@@ -80,9 +80,9 @@ export const ControlledInput = (inputProps: Props) => {
     }
 
     const props = {
-        name: field.name,
+        name: step.name ?? field.name,
         ...step.props,
-        id: entry,
+        id: step.name ?? entry,
         readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null,
         placeholder: step.placeholder,
         onChange: (e: ChangeEvent<HTMLInputElement>) => {

src/form/types.ts

@@ -68,6 +68,7 @@ export interface SchemaEntry {
   visible?: boolean | ((prop: { rawValues: { [x: string]: any }, value: any, informations?: Informations }) => boolean);
   disabled?: boolean | ((prop: { rawValues: { [x: string]: any }, value: any, informations?: Informations }) => boolean);
   label?: React.ReactNode | ((prop: { rawValues: { [x: string]: any }, value: any, informations?: Informations }) => React.ReactNode);
+  name?: string;
   placeholder?: string;
   defaultValue?: any;
   help?: string;