From 334a6f9930b8e09d90e44b51b19bed30184a1641 Mon Sep 17 00:00:00 2001
From: ibolton336 <ibolton@redhat.com>
Date: Thu, 21 Sep 2023 16:26:02 -0400
Subject: [PATCH] :bug: Fully unique ids for answer selections

Signed-off-by: ibolton336 <ibolton@redhat.com>
---
 .../multi-input-selection/multi-input-selection.tsx      | 7 +++----
 .../components/questionnaire-form/questionnaire-form.tsx | 9 ++++++---
 client/src/app/pages/assessment/form-utils.ts            | 2 +-
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/client/src/app/pages/assessment/components/questionnaire-form/multi-input-selection/multi-input-selection.tsx b/client/src/app/pages/assessment/components/questionnaire-form/multi-input-selection/multi-input-selection.tsx
index 5a74d2d966..d2b08203d3 100644
--- a/client/src/app/pages/assessment/components/questionnaire-form/multi-input-selection/multi-input-selection.tsx
+++ b/client/src/app/pages/assessment/components/questionnaire-form/multi-input-selection/multi-input-selection.tsx
@@ -27,18 +27,17 @@ export const MultiInputSelection: React.FC<MultiInputSelectionProps> = ({
 
   const isArchetype = useIsArchetype();
   const { t } = useTranslation();
-
   return (
     <Stack>
       {sortedOptions.map((option, i) => (
-        <StackItem key={option.text} className="pf-v5-u-pb-xs">
+        <StackItem key={`${questionFieldName}-${i}`} className="pf-v5-u-pb-xs">
           <HookFormPFGroupController
             control={control}
             name={questionFieldName as `questions.${string}`}
-            fieldId="stakeholders"
+            fieldId={`${questionFieldName}-${i}`}
             renderInput={({ field: { value, onChange } }) => (
               <Radio
-                id={`${option.text}`}
+                id={`${questionFieldName}-${option.order}`}
                 name={questionFieldName}
                 isChecked={value === option.text}
                 onChange={(checked, e) => {
diff --git a/client/src/app/pages/assessment/components/questionnaire-form/questionnaire-form.tsx b/client/src/app/pages/assessment/components/questionnaire-form/questionnaire-form.tsx
index f352741111..4604f4ddf1 100644
--- a/client/src/app/pages/assessment/components/questionnaire-form/questionnaire-form.tsx
+++ b/client/src/app/pages/assessment/components/questionnaire-form/questionnaire-form.tsx
@@ -12,7 +12,7 @@ import {
 import HelpIcon from "@patternfly/react-icons/dist/esm/icons/help-icon";
 import { MultiInputSelection } from "./multi-input-selection";
 import { Question, QuestionHeader, QuestionBody } from "./question";
-import { getCommentFieldName } from "../../form-utils";
+import { getCommentFieldName, getQuestionFieldName } from "../../form-utils";
 import { HookFormPFTextInput } from "@app/components/HookFormPFFields";
 import { useFormContext } from "react-hook-form";
 import { Section } from "@app/api/models";
@@ -54,7 +54,7 @@ export const QuestionnaireForm: React.FC<QuestionnaireFormProps> = ({
         </TextContent>
       </StackItem>
       {sortedQuestions.map((question) => (
-        <StackItem key={question.text}>
+        <StackItem key={question.order}>
           <Question cy-data="question">
             <QuestionHeader>
               <Split hasGutter>
@@ -74,7 +74,10 @@ export const QuestionnaireForm: React.FC<QuestionnaireFormProps> = ({
               </Split>
             </QuestionHeader>
             <QuestionBody>
-              <MultiInputSelection question={question} />
+              <MultiInputSelection
+                key={getQuestionFieldName(question, true)}
+                question={question}
+              />
             </QuestionBody>
           </Question>
         </StackItem>
diff --git a/client/src/app/pages/assessment/form-utils.ts b/client/src/app/pages/assessment/form-utils.ts
index 1f2f54deb5..43fcb26f5d 100644
--- a/client/src/app/pages/assessment/form-utils.ts
+++ b/client/src/app/pages/assessment/form-utils.ts
@@ -15,6 +15,6 @@ export const getCommentFieldName = (section: Section, fullName: boolean) => {
 };
 
 export const getQuestionFieldName = (question: Question, fullName: boolean) => {
-  const fieldName = `question-${question.text}`;
+  const fieldName = `question-${question.order}`;
   return fullName ? `${QUESTIONS_KEY}.${fieldName}` : fieldName;
 };