fix: resolve quantity stories bug #1616

packages/smart-forms-renderer/src/components/FormComponents/QuantityItem/QuantityItem.tsx

@@ -185,47 +185,95 @@
 
   // Event handlers
   function handleComparatorInputChange(newComparatorInput: Quantity['comparator'] | null) {
+    console.log('🔍 Comparator changed:', {
+      newComparatorInput,
+      valueInput,
+      hasValue: !!valueInput,
+      willUpdateQR: true
+    });
+
     setComparatorInput(newComparatorInput);
 
     // Only suppress feedback once (before first blur)
     if (!hasBlurred) {
       setShowFeedback(false);
     }
 
-    if (!valueInput) return;
-
-    onQrItemChange({
-      ...createEmptyQrItem(qItem, answerKey),
-      answer: createQuantityItemAnswer(
-        precision,
-        valueInput,
-        newComparatorInput,
-        unitInput,
-        answerKey
-      )
-    });
+    // Always update QR item, even if valueInput is empty
+    if (valueInput) {
+      const qrUpdate = {
+        ...createEmptyQrItem(qItem, answerKey),
+        answer: createQuantityItemAnswer(
+          precision,
+          valueInput,
+          newComparatorInput,
+          unitInput,
+          answerKey
+        )
+      };
+      console.log('✅ Updating QR with comparator (with value):', qrUpdate);
+      onQrItemChange(qrUpdate);
+    } else {
+      // If no value input, still update with empty quantity to preserve comparator
+      const qrUpdate = {
+        ...createEmptyQrItem(qItem, answerKey),
+        answer: createQuantityItemAnswer(
+          precision,
+          '',
+          newComparatorInput,
+          unitInput,
+          answerKey
+        )
+      };
+      console.log('✅ Updating QR with comparator (no value):', qrUpdate);
+      onQrItemChange(qrUpdate);
+    }
   }
 
   function handleUnitInputChange(newUnitInput: QuestionnaireItemAnswerOption | null) {
+    console.log('🔍 Unit changed:', {
+      newUnitInput: newUnitInput?.valueCoding?.display,
+      valueInput,
+      hasValue: !!valueInput,
+      willUpdateQR: true
+    });
+
     setUnitInput(newUnitInput);
 
     // Only suppress feedback once (before first blur)
     if (!hasBlurred) {
       setShowFeedback(false);
     }
 
-    if (!valueInput) return;
-
-    onQrItemChange({
-      ...createEmptyQrItem(qItem, answerKey),
-      answer: createQuantityItemAnswer(
-        precision,
-        valueInput,
-        comparatorInput,
-        newUnitInput,
-        answerKey
-      )
-    });
+    // Always update QR item, even if valueInput is empty
+    if (valueInput) {
+      const qrUpdate = {
+        ...createEmptyQrItem(qItem, answerKey),
+        answer: createQuantityItemAnswer(
+          precision,
+          valueInput,
+          comparatorInput,
+          newUnitInput,
+          answerKey
+        )
+      };
+      console.log('✅ Updating QR with unit (with value):', qrUpdate);
+      onQrItemChange(qrUpdate);
+    } else {
+      // If no value input, still update with empty quantity to preserve unit
+      const qrUpdate = {
+        ...createEmptyQrItem(qItem, answerKey),
+        answer: createQuantityItemAnswer(
+          precision,
+          '',
+          comparatorInput,
+          newUnitInput,
+          answerKey
+        )
+      };
+      console.log('✅ Updating QR with unit (no value):', qrUpdate);
+      onQrItemChange(qrUpdate);
+    }
   }
 
   function handleValueInputChange(newInput: string) {

packages/smart-forms-renderer/src/stories/itemTypes/Quantity.stories.tsx

@@ -69,3 +69,31 @@
     questionnaire: qQuantityCalculation
   }
 };
+
+export const QuantityBasicComparator: Story = {
+  name: 'Quantity Basic Comparator',
+  args: {
+    questionnaire: qQuantityBasic
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Test case for quantity with comparator. After filling the input, the comparator should be "<" but store returns undefined.'
+      }
+    }
+  }
+};
+
+export const QuantityMultiUnit: Story = {
+  name: 'Quantity Multi Unit',
+  args: {
+    questionnaire: qQuantityUnitOption
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Test case for quantity with multiple units. After filling the input, the unit should be "Week(s)" but store returns "Day(s)".'
+      }
+    }
+  }
+};

packages/smart-forms-renderer/src/utils/quantity.ts

@@ -35,31 +35,27 @@ export function createQuantityItemAnswer(
   unitInput: QuestionnaireItemAnswerOption | null,
   answerKey: string | undefined
 ): QuestionnaireResponseItemAnswer[] {
-  if (precision) {
-    return [
-      {
-        id: answerKey,
-        valueQuantity: {
-          value: parseDecimalStringToFloat(parsedNewInput, precision),
-          comparator: comparatorInput ?? undefined,
-          unit: unitInput?.valueCoding?.display,
-          system: unitInput?.valueCoding?.system,
-          code: unitInput?.valueCoding?.code
-        }
-      }
-    ];
+  // Handle empty input - only include value if there's actual input
+  const valueQuantity: Quantity = {
+    comparator: comparatorInput ?? undefined,
+    unit: unitInput?.valueCoding?.display,
+    system: unitInput?.valueCoding?.system,
+    code: unitInput?.valueCoding?.code
+  };
+
+  // Only add value if there's actual input
+  if (parsedNewInput && parsedNewInput.trim() !== '') {
+    if (precision) {
+      valueQuantity.value = parseDecimalStringToFloat(parsedNewInput, precision);
+    } else {
+      valueQuantity.value = parseFloat(parsedNewInput);
+    }
   }
 
   return [
     {
       id: answerKey,
-      valueQuantity: {
-        value: parseFloat(parsedNewInput),
-        comparator: comparatorInput ?? undefined,
-        unit: unitInput?.valueCoding?.display,
-        system: unitInput?.valueCoding?.system,
-        code: unitInput?.valueCoding?.code
-      }
+      valueQuantity
     }
   ];
 }