From c8f9c45bd8526514c19c9083a4e9637ae6f99679 Mon Sep 17 00:00:00 2001
From: Dave Armstrong <dave.armstrong@topcoder.com>
Date: Wed, 20 Jul 2022 07:18:13 -0500
Subject: [PATCH 1/2] Updating keys to prevent react rendering errors.

---
 src-ts/lib/form/Form.tsx                            |  2 +-
 src-ts/lib/form/form-groups/FormGroups.tsx          |  4 ++--
 .../form/form-groups/form-card-set/FormCardSet.tsx  | 13 ++++++-------
 src-ts/lib/form/form-groups/form-radio/index.tsx    |  2 +-
 src-ts/lib/route-provider/route.provider.tsx        |  2 +-
 5 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/src-ts/lib/form/Form.tsx b/src-ts/lib/form/Form.tsx
index 3b572f6f1..54ec1f0e5 100644
--- a/src-ts/lib/form/Form.tsx
+++ b/src-ts/lib/form/Form.tsx
@@ -121,7 +121,7 @@ const Form: <ValueType extends any, RequestType extends any>(props: FormProps<Va
                 return (
                     <Button
                         {...button}
-                        key={button.label}
+                        key={button.label || `button-${index}`}
                         disable={isPrimaryGroup && isFormInvalid}
                         tabIndex={button.notTabble ? -1 : index + (inputs ? inputs.length : 0) + (formDef.tabIndexStart || 0)}
                     />
diff --git a/src-ts/lib/form/form-groups/FormGroups.tsx b/src-ts/lib/form/form-groups/FormGroups.tsx
index a67702984..9ac4f40cf 100644
--- a/src-ts/lib/form/form-groups/FormGroups.tsx
+++ b/src-ts/lib/form/form-groups/FormGroups.tsx
@@ -100,8 +100,8 @@ const FormGroups: (props: FormGroupsProps) => JSX.Element = (props: FormGroupsPr
         )
     }
 
-    const formGroups: Array<JSX.Element | undefined> = formDef?.groups?.map((element: FormGroup) => {
-        return <FormGroupItem group={element} renderFormInput={renderInputField} />
+    const formGroups: Array<JSX.Element | undefined> = formDef?.groups?.map((element: FormGroup, index: number) => {
+        return <FormGroupItem key={`element-${index}`} group={element} renderFormInput={renderInputField} />
     }) || []
 
     return (
diff --git a/src-ts/lib/form/form-groups/form-card-set/FormCardSet.tsx b/src-ts/lib/form/form-groups/form-card-set/FormCardSet.tsx
index ac5452b9f..665af51a1 100644
--- a/src-ts/lib/form/form-groups/form-card-set/FormCardSet.tsx
+++ b/src-ts/lib/form/form-groups/form-card-set/FormCardSet.tsx
@@ -25,23 +25,22 @@ const FormCardSet: React.FC<FormCardSetProps> = ({ name, cards, onChange, value
     return (
         <div className={styles['form-card-set']}>
             {
-                cards?.map(card => {
+                cards?.map((card, index: number) => {
                     const formattedPrice: string | undefined = textFormatMoneyLocaleString(card.price)
                     const selected: boolean = value === card.id
 
                     return (
-
-                        <label className={cn(styles['card'], selected && styles['selected'])}>
+                        <label key={`card-${index}`}className={cn(styles['card'], selected && styles['selected'])}>
                             <input checked={value === card.id} type='radio' name={name} id={card.id} value={card.id} onChange={onChange} />
                             <div className={styles['card-header']}>
                                 <div className='body-medium-bold'>{card.title}</div>
                                 <h3>{formattedPrice}</h3>
                             </div>
                             <hr />
-                            {card.sections.map(section => (
-                                <div className={styles['card-section']}>
-                                    {section.rows.map(row => (
-                                            <div className={styles['card-row']}>
+                            {card.sections.map((section, sectionIndex: number) => (
+                                <div key={`section-${sectionIndex}`} className={styles['card-section']}>
+                                    {section.rows.map((row, rowIndex: number) => (
+                                            <div key={`row-${rowIndex}`} className={styles['card-row']}>
                                                 <span className={styles['card-row-col']}>
                                                     <>
                                                         {row.icon && iconFromName(row.icon)}
diff --git a/src-ts/lib/form/form-groups/form-radio/index.tsx b/src-ts/lib/form/form-groups/form-radio/index.tsx
index ab182d9be..5adecaaae 100644
--- a/src-ts/lib/form/form-groups/form-radio/index.tsx
+++ b/src-ts/lib/form/form-groups/form-radio/index.tsx
@@ -20,7 +20,7 @@ const FormRadio: React.FC<FormRadioProps> = ({type, name, options, onChange, val
         <div className={styles['form-radio']}>
             {
                 options?.map(({children: Option, id}: FormRadioButtonOption)  => (
-                    <label className={styles['option']} htmlFor={id}>
+                    <label key={id} className={styles['option']} htmlFor={id}>
                         <input checked={value === id} type={type} name={name} id={id} value={id} onChange={onChange} />
                         {renderOption(Option, value === id)}
                     </label>
diff --git a/src-ts/lib/route-provider/route.provider.tsx b/src-ts/lib/route-provider/route.provider.tsx
index 24d081d5f..c26d860d3 100644
--- a/src-ts/lib/route-provider/route.provider.tsx
+++ b/src-ts/lib/route-provider/route.provider.tsx
@@ -127,7 +127,7 @@ export const RouteProvider: FC<RouteProviderProps> = (props: RouteProviderProps)
         return (
             <Route
                 element={routeElement}
-                key={route.title}
+                key={route.route}
                 path={path}
             />
         )

From eaae2d4e5c2a5e49c0f92d6dbf0a17eff005fa5c Mon Sep 17 00:00:00 2001
From: Dave Armstrong <dave.armstrong@topcoder.com>
Date: Wed, 20 Jul 2022 09:13:33 -0500
Subject: [PATCH 2/2] Fix Bug Hunt Form CSS bug and file name

---
 .../form/form-groups/form-card-set/FormCardSet.module.scss | 7 +------
 .../form/form-groups/form-card-set/{index.tsx => index.ts} | 0
 2 files changed, 1 insertion(+), 6 deletions(-)
 rename src-ts/lib/form/form-groups/form-card-set/{index.tsx => index.ts} (100%)

diff --git a/src-ts/lib/form/form-groups/form-card-set/FormCardSet.module.scss b/src-ts/lib/form/form-groups/form-card-set/FormCardSet.module.scss
index 73bc35d14..0e938f55c 100644
--- a/src-ts/lib/form/form-groups/form-card-set/FormCardSet.module.scss
+++ b/src-ts/lib/form/form-groups/form-card-set/FormCardSet.module.scss
@@ -9,13 +9,8 @@
         margin-bottom: $pad-lg;
     }
 
-    input[type=radio] {
-        position: absolute;
+    input[type=radio] {  
         opacity: 0;
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
     }
 
     .card {
diff --git a/src-ts/lib/form/form-groups/form-card-set/index.tsx b/src-ts/lib/form/form-groups/form-card-set/index.ts
similarity index 100%
rename from src-ts/lib/form/form-groups/form-card-set/index.tsx
rename to src-ts/lib/form/form-groups/form-card-set/index.ts