From be3d2fca059c1972d15ba6af4cb0e85967b419bf Mon Sep 17 00:00:00 2001
From: Hariom Balhara <hariombalhara@gmail.com>
Date: Sat, 15 Apr 2023 18:52:51 +0530
Subject: [PATCH] Use name to generate unique for attribute for label (#8265)

---
 .../components/react-awesome-query-builder/widgets.tsx      | 1 +
 packages/features/form-builder/Components.tsx               | 4 ++--
 packages/features/form-builder/FormBuilder.tsx              | 6 +++++-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/app-store/routing-forms/components/react-awesome-query-builder/widgets.tsx b/packages/app-store/routing-forms/components/react-awesome-query-builder/widgets.tsx
index 4833745f13..8fec40249a 100644
--- a/packages/app-store/routing-forms/components/react-awesome-query-builder/widgets.tsx
+++ b/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;
diff --git a/packages/features/form-builder/Components.tsx b/packages/features/form-builder/Components.tsx
index 63b8b743ac..1d5bb548a5 100644
--- a/packages/features/form-builder/Components.tsx
+++ b/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`}
               />
             ))}
           </>
diff --git a/packages/features/form-builder/FormBuilder.tsx b/packages/features/form-builder/FormBuilder.tsx
index eeca8b63e0..feba93976d 100644
--- a/packages/features/form-builder/FormBuilder.tsx
+++ b/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}