@openmrs/esm-form-engine-lib 4.1.1-pre.2358 → 4.1.1-pre.2360

package/dist/components/repeat/repeat.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"repeat.component.d.ts","sourceRoot":"","sources":["../../../src/components/repeat/repeat.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AACzE,OAAO,KAAK,EAAa,mBAAmB,EAAc,MAAM,aAAa,CAAC;AAkB9E,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAwKzC,CAAC;AAmBF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"repeat.component.d.ts","sourceRoot":"","sources":["../../../src/components/repeat/repeat.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAEzE,OAAO,KAAK,EAAa,mBAAmB,EAAc,MAAM,aAAa,CAAC;AAiB9E,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA2KzC,CAAC;AAmBF,eAAe,MAAM,CAAC"}

package/dist/components/repeat/repeat.component.js

@@ -1,28 +1,26 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { evaluateAsyncExpression, evaluateExpression } from "../../utils/expression-runner.js";
-import { isEmpty } from "../../validators/form-validator.js";
-import styles from "./repeat.scss";
-import { cloneRepeatField } from "./helpers.js";
-import { clearSubmission, isViewMode } from "../../utils/common-utils.js";
-import RepeatControls from "./repeat-controls.component.js";
 import { createErrorHandler } from "@openmrs/esm-framework";
-import { useFormProviderContext } from "../../provider/form-provider.js";
 import { FormFieldRenderer } from "../renderer/field/form-field-renderer.component.js";
+import { clearSubmission, isViewMode } from "../../utils/common-utils.js";
+import { cloneRepeatField } from "./helpers.js";
+import { evaluateAsyncExpression, evaluateExpression } from "../../utils/expression-runner.js";
+import { isEmpty } from "../../validators/form-validator.js";
 import { useFormFactory } from "../../provider/form-factory-provider.js";
+import { useFormProviderContext } from "../../provider/form-provider.js";
+import RepeatControls from "./repeat-controls.component.js";
+import styles from "./repeat.scss";
 const renderingByTypeMap = {
     obsGroup: 'group',
     testOrder: 'select',
     diagnosis: 'ui-select-extended'
 };
 const Repeat = ({ field })=>{
-    const [counter, setCounter] = useState(0);
     const [rows, setRows] = useState([]);
     const context = useFormProviderContext();
     const { handleConfirmQuestionDeletion } = useFormFactory();
     const { patient, sessionMode, formFieldAdapters, formFields, methods: { getValues, setValue, unregister }, addFormField, removeFormField, deletedFields, setDeletedFields, visit } = context;
     useEffect(()=>{
         const repeatedFields = formFields.filter((_field)=>_field.questionOptions.concept === field.questionOptions.concept && _field.id.startsWith(field.id) && !_field.meta?.repeat?.wasDeleted);
-        setCounter(repeatedFields.length - 1);
         setRows(repeatedFields);
     }, [
         formFields,
@@ -130,31 +128,35 @@ const Repeat = ({ field })=>{
         }
     };
     const nodes = useMemo(()=>{
-        return rows.map((field, index)=>{
+        return rows.map((row, index)=>{
             const component = /*#__PURE__*/ React.createElement(FormFieldRenderer, {
-                fieldId: field.id,
-                valueAdapter: formFieldAdapters[field.type],
+                fieldId: row.id,
+                valueAdapter: formFieldAdapters[row.type],
                 repeatOptions: {
-                    targetRendering: getQuestionWithSupportedRendering(field).questionOptions.rendering
+                    targetRendering: getQuestionWithSupportedRendering(row).questionOptions.rendering
                 }
             });
             return /*#__PURE__*/ React.createElement("div", {
-                key: field.id + '_wrapper'
+                key: row.id + '_wrapper'
             }, index !== 0 && /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("hr", {
                 className: styles.divider
             })), /*#__PURE__*/ React.createElement("div", {
                 className: styles.nodeContainer
             }, component), !isViewMode(sessionMode) && /*#__PURE__*/ React.createElement(RepeatControls, {
-                question: field,
+                question: row,
                 rows: rows,
                 questionIndex: index,
                 handleDelete: ()=>{
-                    onClickDeleteQuestion(field);
+                    onClickDeleteQuestion(row);
                 },
                 handleAdd: ()=>{
-                    const nextCount = counter + 1;
-                    handleAdd(nextCount);
-                    setCounter(nextCount);
+                    // Use max-existing-suffix + 1 so new rows don't collide with a surviving
+                    // row after a middle row is deleted (the buggy `length - 1 + 1` would).
+                    const nextSuffix = rows.reduce((max, r)=>{
+                        const suffix = Number(r.id.slice(field.id.length + 1));
+                        return Number.isFinite(suffix) ? Math.max(max, suffix) : max;
+                    }, 0) + 1;
+                    handleAdd(nextSuffix);
                 }
             }));
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-form-engine-lib",
-  "version": "4.1.1-pre.2358",
+  "version": "4.1.1-pre.2360",
   "description": "React Form Engine for O3",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/components/repeat/repeat.component.tsx

@@ -1,15 +1,15 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { createErrorHandler } from '@openmrs/esm-framework';
 import type { FormField, FormFieldInputProps, RenderType } from '../../types';
+import { FormFieldRenderer } from '../renderer/field/form-field-renderer.component';
+import { clearSubmission, isViewMode } from '../../utils/common-utils';
+import { cloneRepeatField } from './helpers';
 import { evaluateAsyncExpression, evaluateExpression } from '../../utils/expression-runner';
 import { isEmpty } from '../../validators/form-validator';
-import styles from './repeat.scss';
-import { cloneRepeatField } from './helpers';
-import { clearSubmission, isViewMode } from '../../utils/common-utils';
-import RepeatControls from './repeat-controls.component';
-import { createErrorHandler } from '@openmrs/esm-framework';
-import { useFormProviderContext } from '../../provider/form-provider';
-import { FormFieldRenderer } from '../renderer/field/form-field-renderer.component';
 import { useFormFactory } from '../../provider/form-factory-provider';
+import { useFormProviderContext } from '../../provider/form-provider';
+import RepeatControls from './repeat-controls.component';
+import styles from './repeat.scss';
 
 const renderingByTypeMap: Record<string, RenderType> = {
   obsGroup: 'group',
@@ -18,7 +18,6 @@ const renderingByTypeMap: Record<string, RenderType> = {
 };
 
 const Repeat: React.FC<FormFieldInputProps> = ({ field }) => {
-  const [counter, setCounter] = useState(0);
   const [rows, setRows] = useState([]);
   const context = useFormProviderContext();
   const { handleConfirmQuestionDeletion } = useFormFactory();
@@ -42,7 +41,6 @@ const Repeat: React.FC<FormFieldInputProps> = ({ field }) => {
         _field.id.startsWith(field.id) &&
         !_field.meta?.repeat?.wasDeleted,
     );
-    setCounter(repeatedFields.length - 1);
     setRows(repeatedFields);
   }, [formFields, field]);
 
@@ -140,16 +138,16 @@ const Repeat: React.FC<FormFieldInputProps> = ({ field }) => {
   };
 
   const nodes = useMemo(() => {
-    return rows.map((field, index) => {
+    return rows.map((row, index) => {
       const component = (
         <FormFieldRenderer
-          fieldId={field.id}
-          valueAdapter={formFieldAdapters[field.type]}
-          repeatOptions={{ targetRendering: getQuestionWithSupportedRendering(field).questionOptions.rendering }}
+          fieldId={row.id}
+          valueAdapter={formFieldAdapters[row.type]}
+          repeatOptions={{ targetRendering: getQuestionWithSupportedRendering(row).questionOptions.rendering }}
         />
       );
       return (
-        <div key={field.id + '_wrapper'}>
+        <div key={row.id + '_wrapper'}>
           {index !== 0 && (
             <div>
               <hr className={styles.divider} />
@@ -158,16 +156,21 @@ const Repeat: React.FC<FormFieldInputProps> = ({ field }) => {
           <div className={styles.nodeContainer}>{component}</div>
           {!isViewMode(sessionMode) && (
             <RepeatControls
-              question={field}
+              question={row}
               rows={rows}
               questionIndex={index}
               handleDelete={() => {
-                onClickDeleteQuestion(field);
+                onClickDeleteQuestion(row);
               }}
               handleAdd={() => {
-                const nextCount = counter + 1;
-                handleAdd(nextCount);
-                setCounter(nextCount);
+                // Use max-existing-suffix + 1 so new rows don't collide with a surviving
+                // row after a middle row is deleted (the buggy `length - 1 + 1` would).
+                const nextSuffix =
+                  rows.reduce((max, r) => {
+                    const suffix = Number(r.id.slice(field.id.length + 1));
+                    return Number.isFinite(suffix) ? Math.max(max, suffix) : max;
+                  }, 0) + 1;
+                handleAdd(nextSuffix);
               }}
             />
           )}