Use name to generate unique for attribute for label (#8265)

packages/app-store/routing-forms/components/react-awesome-query-builder/widgets.tsx

@@ -23,6 +23,7 @@ export type CommonProps<
   placeholder?: string;
   readOnly?: boolean;
   className?: string;
+  name?: string;
   label?: string;
   value: TVal;
   setValue: (value: TVal) => void;

packages/features/form-builder/Components.tsx

@@ -259,7 +259,7 @@ export const Components: Record<BookingFieldType, Component> = {
   },
   radio: {
     propsType: "select",
-    factory: ({ setValue, value, options }) => {
+    factory: ({ setValue, name, value, options }) => {
       return (
         <Group
           value={value}
@@ -272,7 +272,7 @@ export const Components: Record<BookingFieldType, Component> = {
                 label={option.label}
                 key={`option.${i}.radio`}
                 value={option.label}
-                id={`option.${i}.radio`}
+                id={`${name}.option.${i}.radio`}
               />
             ))}
           </>

packages/features/form-builder/FormBuilder.tsx

@@ -640,9 +640,9 @@ export const ComponentForField = ({
       <WithLabel field={field} readOnly={readOnly}>
         <componentConfig.factory
           placeholder={field.placeholder}
+          name={field.name}
           label={field.label}
           readOnly={readOnly}
-          name={field.name}
           value={value as string}
           setValue={setValue as (arg: typeof value) => void}
         />
@@ -654,6 +654,7 @@ export const ComponentForField = ({
     return (
       <WithLabel field={field} readOnly={readOnly}>
         <componentConfig.factory
+          name={field.name}
           label={field.label}
           readOnly={readOnly}
           value={value as boolean}
@@ -669,6 +670,7 @@ export const ComponentForField = ({
       <WithLabel field={field} readOnly={readOnly}>
         <componentConfig.factory
           placeholder={field.placeholder}
+          name={field.name}
           label={field.label}
           readOnly={readOnly}
           value={value as string[]}
@@ -688,6 +690,7 @@ export const ComponentForField = ({
         <componentConfig.factory
           readOnly={readOnly}
           value={value as string}
+          name={field.name}
           placeholder={field.placeholder}
           setValue={setValue as (arg: typeof value) => void}
           options={field.options.map((o) => ({ ...o, title: o.label }))}
@@ -704,6 +707,7 @@ export const ComponentForField = ({
       <WithLabel field={field} readOnly={readOnly}>
         <componentConfig.factory
           placeholder={field.placeholder}
+          name={field.name}
           readOnly={readOnly}
           value={value as string[]}
           setValue={setValue as (arg: typeof value) => void}