(fix) Additional concept answers field disappears when selecting a co…

…ncept (#394) * (fix) Additional concept answers field disappears when selecting a concept * code review --------- Co-authored-by: Dennis Kigen <[email protected]>
openmrs · Feb 17, 2025 · 5e82cae · 5e82cae
1 parent 3d14b04
commit 5e82cae
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 11 deletions.
diff --git a/...-builder/modals/question/question-form/common/concept-search/concept-search.component.tsx b/...-builder/modals/question/question-form/common/concept-search/concept-search.component.tsx
@@ -14,16 +14,17 @@ interface ConceptSearchProps {
   defaultConcept?: string;
   onClearSelectedConcept?: () => void;
   onSelectConcept: (concept: Concept) => void;
+  retainConceptInContextAfterSearch?: boolean;
 }
 
 const ConceptSearch: React.FC<ConceptSearchProps> = ({
   label,
   defaultConcept,
   onClearSelectedConcept,
   onSelectConcept,
+  retainConceptInContextAfterSearch = false,
 }) => {
   const { t } = useTranslation();
-  const { setConcept } = useFormField();
   const [conceptToLookup, setConceptToLookup] = useState('');
   const debouncedConceptToLookup = useDebounce(conceptToLookup);
   const { concepts, conceptLookupError, isLoadingConcepts } = useConceptLookup(debouncedConceptToLookup);
@@ -34,12 +35,13 @@ const ConceptSearch: React.FC<ConceptSearchProps> = ({
     isLoadingConcept,
   } = useConceptId(defaultConcept);
   const [selectedConcept, setSelectedConcept] = useState<Concept>(initialConcept);
+  const { concept, setConcept } = useFormField();
 
   useEffect(() => {
-    if (initialConcept) {
+    if (retainConceptInContextAfterSearch && initialConcept && !concept) {
       setConcept(initialConcept);
     }
-  }, [initialConcept, setConcept]);
+  }, [initialConcept, retainConceptInContextAfterSearch, concept, setConcept]);
 
   const handleConceptChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => setConceptToLookup(event.target.value),
@@ -49,19 +51,17 @@ const ConceptSearch: React.FC<ConceptSearchProps> = ({
   const handleConceptSelect = useCallback(
     (concept: Concept) => {
       setConceptToLookup('');
-      setConcept(concept);
       setSelectedConcept(concept);
       onSelectConcept(concept);
     },
-    [onSelectConcept, setConcept],
+    [onSelectConcept],
   );
 
   const clearSelectedConcept = useCallback(() => {
     setSelectedConcept(null);
     setConceptToLookup('');
-    setConcept(null);
     if (onClearSelectedConcept) onClearSelectedConcept();
-  }, [onClearSelectedConcept, setConcept]);
+  }, [onClearSelectedConcept]);
 
   return (
     <>

diff --git a/...r/modals/question/question-form/question-types/inputs/obs/obs-type-question.component.tsx b/...r/modals/question/question-form/question-types/inputs/obs/obs-type-question.component.tsx
@@ -8,7 +8,7 @@ import styles from './obs-type-question.scss';
 
 const ObsTypeQuestion: React.FC = () => {
   const { t } = useTranslation();
-  const { formField, setFormField, concept } = useFormField();
+  const { formField, setFormField, concept, setConcept } = useFormField();
 
   const getDatePickerType = useCallback((concept: Concept): DatePickerType | null => {
     const conceptDataType = concept.datatype.name;
@@ -27,6 +27,7 @@ const ObsTypeQuestion: React.FC = () => {
   const handleConceptSelect = useCallback(
     (selectedConcept: Concept) => {
       if (selectedConcept) {
+        setConcept(selectedConcept);
         const datePickerType = getDatePickerType(selectedConcept);
         setFormField((prevField) => ({
           ...prevField,
@@ -38,10 +39,11 @@ const ObsTypeQuestion: React.FC = () => {
         }));
       }
     },
-    [getDatePickerType, setFormField],
+    [getDatePickerType, setFormField, setConcept],
   );
 
   const clearSelectedConcept = useCallback(() => {
+    setConcept(null);
     setFormField((prevFormField) => {
       const updatedFormField = { ...prevFormField };
       if (updatedFormField.questionOptions) {
@@ -53,7 +55,7 @@ const ObsTypeQuestion: React.FC = () => {
       }
       return updatedFormField;
     });
-  }, [setFormField]);
+  }, [setFormField, setConcept]);
 
   const conceptMappings: ConceptMapping[] = useMemo(() => {
     if (concept && concept.mappings) {
@@ -75,6 +77,7 @@ const ObsTypeQuestion: React.FC = () => {
         defaultConcept={formField.questionOptions?.concept ?? null}
         onClearSelectedConcept={clearSelectedConcept}
         onSelectConcept={handleConceptSelect}
+        retainConceptInContextAfterSearch={true}
       />
 
       {concept?.allowDecimal === false && (

diff --git a/.../modals/question/question-form/rendering-types/inputs/select/select-answers.component.tsx b/.../modals/question/question-form/rendering-types/inputs/select/select-answers.component.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Tag, MultiSelect, Stack } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import ConceptSearch from '../../../common/concept-search/concept-search.component';
@@ -16,6 +16,12 @@ const SelectAnswers: React.FC = () => {
   const { formField, concept, setFormField } = useFormField();
   const [addedAnswers, setAddedAnswers] = useState<AnswerItem[]>([]);
 
+  useEffect(() => {
+    if (!concept) {
+      setAddedAnswers([]);
+    }
+  }, [concept]);
+
   const selectedAnswers = useMemo(
     () =>
       formField.questionOptions?.answers?.map((answer) => ({