Update select component

src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/select/select-answers.component.tsx

@@ -3,6 +3,7 @@ import { Tag, MultiSelect, Stack } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import ConceptSearch from '../../../common/concept-search/concept-search.component';
 import { useFormField } from '../../../../form-field-context';
+import type { QuestionAnswerOption } from '@openmrs/esm-form-engine-lib';
 import type { Concept } from '@types';
 import styles from './select-answers.scss';
 
@@ -30,18 +31,21 @@ const SelectAnswers: React.FC = () => {
     })),
   );
 
-  const selectAnswers = useCallback(
-    ({ selectedItems }: { selectedItems: Array<AnswerItem> }) => {
-      const mappedAnswers = selectedItems.map((answer) => ({
+  const areAnswersEqual = (arr1: QuestionAnswerOption[], arr2: QuestionAnswerOption[]) => {
+    if (arr1.length !== arr2.length) return false;
+    return arr1.every((item, index) => item.concept === arr2[index].concept && item.label === arr2[index].label);
+  };
+
+  const updateFormFieldAnswers = useCallback(
+    (selectedAnswers: AnswerItem[]) => {
+      const mappedAnswers = selectedAnswers.map((answer) => ({
         concept: answer.id,
         label: answer.text,
       }));
 
-      setSelectedAnswers(selectedItems);
-
       setFormField((prevField) => {
         const currentAnswers = prevField.questionOptions?.answers || [];
-        if (JSON.stringify(currentAnswers) === JSON.stringify(mappedAnswers)) {
+        if (areAnswersEqual(currentAnswers, mappedAnswers)) {
           return prevField;
         }
         return {
@@ -56,10 +60,20 @@ const SelectAnswers: React.FC = () => {
     [setFormField],
   );
 
+  const handleSelectAnswers = useCallback(
+    ({ selectedItems }: { selectedItems: Array<AnswerItem> }) => {
+      setSelectedAnswers(selectedItems);
+      updateFormFieldAnswers(selectedItems);
+    },
+    [setSelectedAnswers, updateFormFieldAnswers],
+  );
+
   const handleSelectAdditionalAnswer = useCallback(
     (concept: Concept) => {
       const newAnswer = { id: concept.uuid, text: concept.display };
-      const answerExistsInSelected = selectedAnswers.some((answer) => answer.id === newAnswer.id);
+      const answerExistsInSelected = formField.questionOptions.answers
+        ? formField.questionOptions.answers?.some((answer) => answer.id === newAnswer.id)
+        : [];
       const answerExistsInAdded = addedAnswers.some((answer) => answer.id === newAnswer.id);
       if (!answerExistsInSelected && !answerExistsInAdded) {
         setAddedAnswers((prevAnswers) => [...prevAnswers, newAnswer]);
@@ -76,7 +90,7 @@ const SelectAnswers: React.FC = () => {
         });
       }
     },
-    [selectedAnswers, addedAnswers, setFormField],
+    [formField, addedAnswers, setFormField],
   );
 
   const handleDeleteAdditionalAnswer = useCallback(
@@ -136,19 +150,19 @@ const SelectAnswers: React.FC = () => {
           id="selectAnswers"
           items={answerItems}
           itemToString={convertAnswerItemsToString}
-          onChange={selectAnswers}
+          onChange={handleSelectAnswers}
           size="md"
           selectedItems={selectedAnswers}
           initialSelectedItems={initiallySelectedAnswers}
           titleText={t('selectAnswersToDisplay', 'Select answers to display')}
         />
       )}
 
-      {selectedAnswers.length > 0 && (
+      {formField.questionOptions?.answers && formField.questionOptions?.answers?.length > 0 && (
         <div>
-          {selectedAnswers.map((answer) => (
+          {formField.questionOptions.answers.map((answer) => (
             <Tag className={styles.tag} key={answer.id} type={'blue'}>
-              {answer.text}
+              {answer.label}
             </Tag>
           ))}
         </div>