@openmrs/esm-form-builder-app 3.5.2-pre.3588 → 3.5.2-pre.3594

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":">=1.2","webservices.rest":">=2.2.0"},"pages":[{"component":"root","route":"form-builder","online":true,"offline":true,"order":1}],"extensions":[{"name":"system-administration-form-builder-card-link","slot":"system-admin-page-card-link-slot","component":"systemAdministrationFormBuilderCardLink","online":true,"offline":true}],"modals":[{"name":"new-form-modal","component":"newFormModal"},{"name":"new-page-modal","component":"newPageModal"},{"name":"delete-page-modal","component":"deletePageModal"},{"name":"new-section-modal","component":"newSectionModal"},{"name":"delete-section-modal","component":"deleteSectionModal"},{"name":"add-form-reference-modal","component":"addFormReferenceModal"},{"name":"question-modal","component":"questionModal"},{"name":"delete-question-modal","component":"deleteQuestionModal"},{"name":"edit-question-modal","component":"editQuestionModal"},{"name":"restore-draft-schema-modal","component":"restoreDraftSchemaModal"},{"name":"unpublish-form-modal","component":"unpublishFormModal"},{"name":"delete-form-modal","component":"deleteFormModal"},{"name":"edit-translation-modal","component":"editTranslationModal"}],"version":"3.5.2-pre.3588"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":">=1.2","webservices.rest":">=2.2.0"},"pages":[{"component":"root","route":"form-builder","online":true,"offline":true,"order":1}],"extensions":[{"name":"system-administration-form-builder-card-link","slot":"system-admin-page-card-link-slot","component":"systemAdministrationFormBuilderCardLink","online":true,"offline":true}],"modals":[{"name":"new-form-modal","component":"newFormModal"},{"name":"new-page-modal","component":"newPageModal"},{"name":"delete-page-modal","component":"deletePageModal"},{"name":"new-section-modal","component":"newSectionModal"},{"name":"delete-section-modal","component":"deleteSectionModal"},{"name":"add-form-reference-modal","component":"addFormReferenceModal"},{"name":"question-modal","component":"questionModal"},{"name":"delete-question-modal","component":"deleteQuestionModal"},{"name":"edit-question-modal","component":"editQuestionModal"},{"name":"restore-draft-schema-modal","component":"restoreDraftSchemaModal"},{"name":"unpublish-form-modal","component":"unpublishFormModal"},{"name":"delete-form-modal","component":"deleteFormModal"},{"name":"edit-translation-modal","component":"editTranslationModal"}],"version":"3.5.2-pre.3594"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-form-builder-app",
-  "version": "3.5.2-pre.3588",
+  "version": "3.5.2-pre.3594",
   "license": "MPL-2.0",
   "description": "Form Builder for O3",
   "browser": "dist/openmrs-esm-form-builder-app.js",

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { InlineNotification, MultiSelect, Stack } from '@carbon/react';
 import { DndContext, type DragEndEvent } from '@dnd-kit/core';
 import { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
@@ -20,13 +20,40 @@ const SelectAnswers: React.FC = () => {
   const { formField, concept, setFormField } = useFormField();
   const [addedAnswers, setAddedAnswers] = useState<AnswerItem[]>([]);
   const [invalidAnswerIds, setInvalidAnswerIds] = useState<string[]>([]);
+  const initializedConceptUuid = useRef<string | null>(null);
 
+  // Reset the additionally selected answers when the concept changes
   useEffect(() => {
     if (!concept) {
       setAddedAnswers([]);
     }
   }, [concept]);
 
+  // Initialize the selected answers to the concept's answers, once per concept.
+  // The once-per-concept guard keeps a cleared selection cleared instead of
+  // re-selecting every answer whenever the answers list becomes empty.
+  useEffect(() => {
+    if (!concept || initializedConceptUuid.current === concept.uuid) {
+      return;
+    }
+    initializedConceptUuid.current = concept.uuid;
+
+    if (concept.answers?.length && !formField.questionOptions?.answers?.length) {
+      const initialAnswers = concept.answers.map((answer) => ({
+        concept: answer.uuid,
+        label: answer.display,
+      }));
+
+      setFormField((prevField) => ({
+        ...prevField,
+        questionOptions: {
+          ...prevField.questionOptions,
+          answers: initialAnswers,
+        },
+      }));
+    }
+  }, [concept, formField.questionOptions?.answers, setFormField]);
+
   const selectedAnswers = useMemo(() => {
     const answers =
       formField.questionOptions?.answers?.map((answer) => ({
@@ -39,10 +66,12 @@ const SelectAnswers: React.FC = () => {
 
   const handleSelectAnswers = useCallback(
     ({ selectedItems }: { selectedItems: Array<AnswerItem> }) => {
-      const mappedAnswers = selectedItems.map((answer) => ({
-        concept: answer.id,
-        label: answer.text,
-      }));
+      const mappedAnswers = selectedItems
+        .filter((answer) => answer.id !== 'select-all')
+        .map((answer) => ({
+          concept: answer.id,
+          label: answer.text,
+        }));
 
       setFormField((prevField) => {
         const currentAnswers = prevField.questionOptions?.answers || [];
@@ -113,10 +142,17 @@ const SelectAnswers: React.FC = () => {
 
     // If no answers from concept but we have form field answers, use those
     if (conceptAnswerItems.length === 0 && formFieldAnswers.length > 0) {
-      return formFieldAnswers.map((answer) => ({
-        id: answer.concept,
-        text: answer.label,
-      }));
+      return [
+        ...formFieldAnswers.map((answer) => ({
+          id: answer.concept,
+          text: answer.label,
+        })),
+        {
+          id: 'select-all',
+          text: t('selectAllOptions', 'Select all options'),
+          isSelectAll: true,
+        },
+      ];
     }
 
     const formFieldAnswerLabelsMap = new Map(formFieldAnswers.map((answer) => [answer.concept, answer.label]));
@@ -133,8 +169,16 @@ const SelectAnswers: React.FC = () => {
         text: answer.label,
       }));
 
-    return [...answersFromConceptWithLabelsFromFormField, ...additionalAnswers];
-  }, [concept?.answers, formField.questionOptions?.answers]);
+    return [
+      ...answersFromConceptWithLabelsFromFormField,
+      ...additionalAnswers,
+      {
+        id: 'select-all',
+        text: t('selectAllOptions', 'Select all options'),
+        isSelectAll: true,
+      },
+    ];
+  }, [concept?.answers, formField.questionOptions?.answers, t]);
 
   const validateAnswers = useCallback(async () => {
     if (!answerItems.length) {
@@ -144,7 +188,10 @@ const SelectAnswers: React.FC = () => {
 
     const originalAnswerIds = new Set((concept?.answers || []).map((ans) => ans.uuid));
     const invalidIds: string[] = [];
-    const uniqueAnswers = Array.from(new Map(answerItems.map((a) => [a.id, a])).values());
+    // Filter out the 'select-all' option before validation
+    const uniqueAnswers = Array.from(
+      new Map(answerItems.filter((a) => a.id !== 'select-all').map((a) => [a.id, a])).values(),
+    );
 
     for (const answer of uniqueAnswers) {
       if (!originalAnswerIds.has(answer.id)) {
@@ -219,7 +266,7 @@ const SelectAnswers: React.FC = () => {
 
   return (
     <Stack gap={5}>
-      {answerItems.length > 0 && (
+      {answerItems.length > 1 && (
         <MultiSelect
           className={styles.multiSelect}
           direction="bottom"

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { vi, describe, it, expect, beforeEach } from 'vitest';
-import { render, screen, within } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import SelectAnswers from './select-answers.component';
 import { useConceptId } from '@hooks/useConceptId';
 import { useConceptLookup } from '@hooks/useConceptLookup';
@@ -69,7 +69,7 @@ describe('Select answers component', () => {
     ).toBeInTheDocument();
   });
 
-  it('lets user select answers provided by concept', async () => {
+  it('shows answers provided by concept as selected initially', async () => {
     const user = userEvent.setup();
     renderComponent();
     const answersMenu = screen.getByRole('combobox', {
@@ -78,20 +78,50 @@ describe('Select answers component', () => {
     expect(answersMenu).toBeInTheDocument();
 
     await user.click(answersMenu);
-    const answerOption1 = screen.getByRole('option', { name: /answer 1/i });
-    expect(answerOption1).toBeInTheDocument();
-    expect(screen.getByText(/answer 2/i)).toBeInTheDocument();
-    await user.click(answerOption1);
-    const option = screen.getByRole('option', {
+    const answerOption1 = screen.getByRole('checkbox', {
       name: /answer 1/i,
     });
-    expect(within(option).getByText(/answer 1/i)).toBeInTheDocument();
+    const answerOption2 = screen.getByRole('checkbox', {
+      name: /answer 2/i,
+    });
+    expect(answerOption1).toBeChecked();
+    expect(answerOption2).toBeChecked();
+  });
 
-    expect(
-      screen.getByRole('combobox', {
-        name: /select answers to display/i,
-      }),
-    ).toBeInTheDocument();
+  it('keeps a cleared selection cleared instead of re-selecting every answer', async () => {
+    const user = userEvent.setup();
+    renderComponent();
+    const answersMenu = screen.getByRole('combobox', {
+      name: /select answers to display/i,
+    });
+
+    await user.click(answersMenu);
+    await user.click(screen.getByRole('checkbox', { name: /answer 1/i }));
+    await user.click(screen.getByRole('checkbox', { name: /answer 2/i }));
+
+    expect(screen.getByRole('checkbox', { name: /answer 1/i })).not.toBeChecked();
+    expect(screen.getByRole('checkbox', { name: /answer 2/i })).not.toBeChecked();
+  });
+
+  it('renders the answers menu when a saved custom answer exists and the concept has no answers', () => {
+    render(
+      <FormFieldProvider
+        initialFormField={{
+          ...formField,
+          questionOptions: {
+            rendering: 'select',
+            answers: [{ concept: '999', label: 'Custom answer' }],
+          },
+        }}
+        selectedConcept={{ ...concept, answers: [] }}>
+        <SelectAnswers />
+      </FormFieldProvider>,
+    );
+
+    const answersMenu = screen.getByRole('combobox', {
+      name: /select answers to display/i,
+    });
+    expect(answersMenu).toBeInTheDocument();
   });
 
   it('lets users add additional answers if concept is of datatype coded', async () => {