🐛 Fully unique ids for answer selections (#1387)

- Avoids bugs when similar questions are entered in the form with the same text causing the wrong answer to be selected. Adds unique IDs for selectable answers and questions. --------- Signed-off-by: ibolton336 <[email protected]> Co-authored-by: Scott Dickerson <[email protected]>
konveyor · Sep 21, 2023 · 640b187 · 640b187
1 parent 97adab0
commit 640b187
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 10 deletions.
diff --git a/.../assessment/components/questionnaire-form/multi-input-selection/multi-input-selection.tsx b/.../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
@@ -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.test.ts b/client/src/app/pages/assessment/form-utils.test.ts
@@ -26,11 +26,11 @@ describe("Application assessment - form utils", () => {
 
   it("getQuestionFieldName: fullName", () => {
     const fieldName = getQuestionFieldName(question, true);
-    expect(fieldName).toBe("questions.question-Question 321");
+    expect(fieldName).toBe("questions.question-1");
   });
 
   it("getQuestionFieldName: singleName", () => {
     const fieldName = getQuestionFieldName(question, false);
-    expect(fieldName).toBe("question-Question 321");
+    expect(fieldName).toBe("question-1");
   });
 });
diff --git 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;
 };