@aehrc/smart-forms-renderer 1.2.11 → 1.2.13

package/src/components/FormComponents/OpenChoiceItems/OpenChoiceAutocompleteField.tsx

@@ -37,6 +37,7 @@ import type {
 import type { AlertColor } from '@mui/material/Alert';
 import { useRendererConfigStore } from '../../../stores';
 import DisplayUnitText from '../ItemParts/DisplayUnitText';
+import ExpressionUpdateFadingIcon from '../ItemParts/ExpressionUpdateFadingIcon';
 
 interface OpenChoiceAutocompleteFieldProps
   extends PropsWithIsTabledAttribute,
@@ -49,6 +50,7 @@ interface OpenChoiceAutocompleteFieldProps
   loading: boolean;
   feedback: { message: string; color: AlertColor } | null;
   readOnly: boolean;
+  calcExpUpdated: boolean;
   onValueChange: (
     newValue: Coding | string | null,
     reason: AutocompleteChangeReason | string
@@ -64,6 +66,7 @@ function OpenChoiceAutocompleteField(props: OpenChoiceAutocompleteFieldProps) {
     loading,
     feedback,
     readOnly,
+    calcExpUpdated,
     isTabled,
     renderingExtensions,
     onValueChange
@@ -132,6 +135,7 @@ function OpenChoiceAutocompleteField(props: OpenChoiceAutocompleteFieldProps) {
                       </Tooltip>
                     </Fade>
                   ) : null}
+                  <ExpressionUpdateFadingIcon fadeIn={calcExpUpdated} disabled={readOnly} />
                   {params.InputProps.endAdornment}
                   <DisplayUnitText readOnly={readOnly}>{displayUnit}</DisplayUnitText>
                 </>

package/src/components/FormComponents/OpenChoiceItems/OpenChoiceAutocompleteItem.tsx

@@ -35,6 +35,7 @@ import { createEmptyQrItem } from '../../../utils';
 import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
 import { useQuestionnaireStore } from '../../../stores';
 import { FullWidthFormComponentBox } from '../../Box.styles';
+import { getQRItemId } from '../../../utils/qrItem';
 
 function OpenChoiceAutocompleteItem(props: BaseItemProps) {
   const {
@@ -45,13 +46,13 @@ function OpenChoiceAutocompleteItem(props: BaseItemProps) {
     renderingExtensions,
     feedbackFromParent,
     parentIsReadOnly,
-    onQrItemChange
+    onQrItemChange,
+    calcExpUpdated
   } = props;
-  // TODO no calcExpUpdated
 
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
-  const answerKey = qrItem?.answer?.[0]?.id;
+  const answerKey = getQRItemId(qrItem?.answer?.[0]?.id);
   const qrOpenChoice = qrItem ?? createEmptyQrItem(qItem, answerKey);
 
   // Init input value
@@ -175,6 +176,7 @@ function OpenChoiceAutocompleteItem(props: BaseItemProps) {
         loading={loading}
         feedback={feedback}
         readOnly={readOnly}
+        calcExpUpdated={calcExpUpdated}
         isTabled={isTabled}
         renderingExtensions={renderingExtensions}
         onValueChange={handleValueChange}
@@ -201,6 +203,7 @@ function OpenChoiceAutocompleteItem(props: BaseItemProps) {
             loading={loading}
             feedback={feedback}
             readOnly={readOnly}
+            calcExpUpdated={calcExpUpdated}
             isTabled={isTabled}
             renderingExtensions={renderingExtensions}
             onValueChange={handleValueChange}

package/src/components/FormComponents/OpenChoiceItems/OpenChoiceCheckboxAnswerOptionItem.tsx

@@ -27,7 +27,7 @@ import { updateChoiceCheckboxAnswers } from '../../../utils/choice';
 import { DEBOUNCE_DURATION } from '../../../utils/debounce';
 import { getOpenLabelText } from '../../../utils/extensions';
 import { updateOpenLabelAnswer } from '../../../utils/openChoice';
-import { createEmptyQrItem } from '../../../utils/qrItem';
+import { createEmptyQrItem, getQRItemId } from '../../../utils/qrItem';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
@@ -50,7 +50,7 @@ function OpenChoiceCheckboxAnswerOptionItem(props: BaseItemProps) {
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
   // Init input value
-  const answerKey = qrItem?.answer?.[0]?.id;
+  const answerKey = getQRItemId(qrItem?.answer?.[0]?.id);
   const qrOpenChoiceCheckbox = qrItem ?? createEmptyQrItem(qItem, answerKey);
   const answers = qrOpenChoiceCheckbox.answer ?? [];
 

package/src/components/FormComponents/OpenChoiceItems/OpenChoiceCheckboxAnswerValueSetItem.tsx

@@ -28,7 +28,7 @@ import { convertCodingsToAnswerOptions, updateChoiceCheckboxAnswers } from '../.
 import { DEBOUNCE_DURATION } from '../../../utils/debounce';
 import { getOpenLabelText } from '../../../utils/extensions';
 import { updateOpenLabelAnswer } from '../../../utils/openChoice';
-import { createEmptyQrItem } from '../../../utils/qrItem';
+import { createEmptyQrItem, getQRItemId } from '../../../utils/qrItem';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
@@ -51,7 +51,7 @@ function OpenChoiceCheckboxAnswerValueSetItem(props: BaseItemProps) {
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
   // Init input value
-  const answerKey = qrItem?.answer?.[0]?.id;
+  const answerKey = getQRItemId(qrItem?.answer?.[0]?.id);
   const qrOpenChoiceCheckbox = qrItem ?? createEmptyQrItem(qItem, answerKey);
   const answers = qrOpenChoiceCheckbox.answer ?? [];
 

package/src/components/FormComponents/OpenChoiceItems/OpenChoiceRadioAnswerOptionItem.tsx

@@ -24,7 +24,7 @@ import { useQuestionnaireStore } from '../../../stores';
 import { findInAnswerOptions, getQrChoiceValue } from '../../../utils/choice';
 import { getOpenLabelText } from '../../../utils/extensions';
 import { getOldOpenLabelAnswer } from '../../../utils/openChoice';
-import { createEmptyQrItem } from '../../../utils/qrItem';
+import { createEmptyQrItem, getQRItemId } from '../../../utils/qrItem';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import ItemLabel from '../ItemParts/ItemLabel';
@@ -45,7 +45,7 @@ function OpenChoiceRadioAnswerOptionItem(props: BaseItemProps) {
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
   // Init answers
-  const answerKey = qrItem?.answer?.[0]?.id;
+  const answerKey = getQRItemId(qrItem?.answer?.[0]?.id);
   const qrOpenChoiceRadio = qrItem ?? createEmptyQrItem(qItem, answerKey);
   let valueRadio: string | null = getQrChoiceValue(qrOpenChoiceRadio, true);
   const answers = qrOpenChoiceRadio.answer ?? [];

package/src/components/FormComponents/OpenChoiceItems/OpenChoiceRadioAnswerValueSetItem.tsx

@@ -29,7 +29,7 @@ import {
 } from '../../../utils/choice';
 import { getOpenLabelText } from '../../../utils/extensions';
 import { getOldOpenLabelAnswer } from '../../../utils/openChoice';
-import { createEmptyQrItem } from '../../../utils/qrItem';
+import { createEmptyQrItem, getQRItemId } from '../../../utils/qrItem';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import ItemLabel from '../ItemParts/ItemLabel';
@@ -50,7 +50,7 @@ function OpenChoiceRadioAnswerValueSetItem(props: BaseItemProps) {
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
   // Init answers
-  const answerKey = qrItem?.answer?.[0]?.id;
+  const answerKey = getQRItemId(qrItem?.answer?.[0]?.id);
   const qrOpenChoiceRadio = qrItem ?? createEmptyQrItem(qItem, answerKey);
   let valueRadio: string | null = getQrChoiceValue(qrOpenChoiceRadio, true);
   const answers = qrOpenChoiceRadio.answer ?? [];

package/src/components/FormComponents/OpenChoiceItems/OpenChoiceSelectAnswerOptionField.tsx

@@ -29,6 +29,8 @@ import type {
 import { useRendererConfigStore } from '../../../stores';
 import { StyledRequiredTypography } from '../Item.styles';
 import DisplayUnitText from '../ItemParts/DisplayUnitText';
+import ExpressionUpdateFadingIcon from '../ItemParts/ExpressionUpdateFadingIcon';
+import StyledText from '../ItemParts/StyledText';
 
 interface OpenChoiceSelectAnswerOptionFieldProps
   extends PropsWithIsTabledAttribute,
@@ -39,6 +41,7 @@ interface OpenChoiceSelectAnswerOptionFieldProps
   valueSelect: QuestionnaireItemAnswerOption | null;
   feedback: string;
   readOnly: boolean;
+  calcExpUpdated: boolean;
   onValueChange: (
     newValue: QuestionnaireItemAnswerOption | string | null,
     reason: AutocompleteChangeReason | string
@@ -52,6 +55,7 @@ function OpenChoiceSelectAnswerOptionField(props: OpenChoiceSelectAnswerOptionFi
     valueSelect,
     feedback,
     readOnly,
+    calcExpUpdated,
     isTabled,
     renderingExtensions,
     onValueChange
@@ -62,6 +66,8 @@ function OpenChoiceSelectAnswerOptionField(props: OpenChoiceSelectAnswerOptionFi
 
   const { displayUnit, displayPrompt, entryFormat } = renderingExtensions;
 
+  const [inputValue, setInputValue] = React.useState('');
+
   return (
     <>
       <Autocomplete
@@ -70,10 +76,42 @@ function OpenChoiceSelectAnswerOptionField(props: OpenChoiceSelectAnswerOptionFi
         options={options}
         getOptionLabel={(option) => getAnswerOptionLabel(option)}
         onChange={(_, newValue, reason) => onValueChange(newValue, reason)}
-        onInputChange={(_, newValue, reason) => onValueChange(newValue, reason)}
+        inputValue={inputValue}
+        onInputChange={(_, newInputValue, reason) => {
+          if (!inputValue && valueSelect && reason !== 'clear') {
+            // Convert current input value to be the current value plus additional input
+            onValueChange(null, 'clear');
+            setInputValue(getAnswerOptionLabel(valueSelect) + newInputValue);
+          } else {
+            setInputValue(newInputValue);
+          }
+        }}
+        onBlur={() => {
+          // Set value on blur if there is any current input
+          if (inputValue) {
+            onValueChange(inputValue, 'blur');
+            setInputValue(''); // Clear input after blur
+          }
+        }}
+        onKeyDown={(e) => {
+          if (e.key === 'Backspace') {
+            if (!inputValue && valueSelect) {
+              // Convert current selection to input value on backspace when input is empty
+              onValueChange(null, 'clear');
+              setInputValue(getAnswerOptionLabel(valueSelect));
+            }
+          }
+        }}
         freeSolo
         autoHighlight
-        sx={{ maxWidth: !isTabled ? textFieldWidth : 3000, minWidth: 160, flexGrow: 1 }}
+        sx={{
+          maxWidth: !isTabled ? textFieldWidth : 3000,
+          minWidth: 160,
+          flexGrow: 1,
+          '& .MuiAutocomplete-tag': {
+            mx: 0
+          }
+        }}
         disabled={readOnly && readOnlyVisualStyle === 'disabled'}
         readOnly={readOnly && readOnlyVisualStyle === 'readonly'}
         size="small"
@@ -90,14 +128,59 @@ function OpenChoiceSelectAnswerOptionField(props: OpenChoiceSelectAnswerOptionFi
                 readOnly: readOnly && readOnlyVisualStyle === 'readonly',
                 endAdornment: (
                   <>
+                    <ExpressionUpdateFadingIcon fadeIn={calcExpUpdated} disabled={readOnly} />
                     {params.InputProps.endAdornment}
                     <DisplayUnitText readOnly={readOnly}>{displayUnit}</DisplayUnitText>
                   </>
-                )
+                ),
+                sx: {
+                  '&.MuiOutlinedInput-root.MuiInputBase-sizeSmall .MuiAutocomplete-input': {
+                    paddingLeft: '0px'
+                  }
+                }
               }
             }}
           />
         )}
+        renderOption={(optionProps, option) => {
+          const { key, ...rest } = optionProps;
+          return (
+            <li key={key} {...rest}>
+              <span>
+                {option.valueString ? (
+                  <StyledText
+                    textToDisplay={getAnswerOptionLabel(option)}
+                    element={option._valueString}
+                  />
+                ) : (
+                  getAnswerOptionLabel(option)
+                )}
+              </span>
+            </li>
+          );
+        }}
+        renderValue={(value, getItemProps) => {
+          if (typeof value === 'string') return value;
+          const selectedOption =
+            typeof value !== 'string'
+              ? options.find((opt) => opt.valueString === value?.valueString)
+              : null;
+
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { onDelete, ...rest } = getItemProps();
+          return (
+            <span {...rest}>
+              {typeof value !== 'string' && value.valueString && selectedOption ? (
+                <StyledText
+                  textToDisplay={getAnswerOptionLabel(value)}
+                  element={selectedOption._valueString}
+                />
+              ) : (
+                getAnswerOptionLabel(value)
+              )}
+            </span>
+          );
+        }}
       />
 
       {feedback ? <StyledRequiredTypography>{feedback}</StyledRequiredTypography> : null}

package/src/components/FormComponents/OpenChoiceItems/OpenChoiceSelectAnswerOptionItem.tsx

@@ -21,7 +21,7 @@ import useReadOnly from '../../../hooks/useReadOnly';
 import useValidationFeedback from '../../../hooks/useValidationFeedback';
 import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
 import { useQuestionnaireStore } from '../../../stores';
-import { createEmptyQrItem } from '../../../utils/qrItem';
+import { createEmptyQrItem, getQRItemId } from '../../../utils/qrItem';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import ItemLabel from '../ItemParts/ItemLabel';
@@ -37,9 +37,9 @@ function OpenChoiceSelectAnswerOptionItem(props: BaseItemProps) {
     renderingExtensions,
     parentIsReadOnly,
     feedbackFromParent,
-    onQrItemChange
+    onQrItemChange,
+    calcExpUpdated
   } = props;
-  // TODO no calcExpUpdated
 
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
@@ -49,7 +49,7 @@ function OpenChoiceSelectAnswerOptionItem(props: BaseItemProps) {
   const feedback = useValidationFeedback(qItem, feedbackFromParent);
 
   // Init input value
-  const answerKey = qrItem?.answer?.[0]?.id;
+  const answerKey = getQRItemId(qrItem?.answer?.[0]?.id);
   const answerOptions = qItem.answerOption;
   if (!answerOptions) return null;
 
@@ -111,6 +111,7 @@ function OpenChoiceSelectAnswerOptionItem(props: BaseItemProps) {
         valueSelect={valueSelect}
         feedback={feedback}
         readOnly={readOnly}
+        calcExpUpdated={calcExpUpdated}
         isTabled={isTabled}
         renderingExtensions={renderingExtensions}
         onValueChange={handleValueChange}
@@ -135,6 +136,7 @@ function OpenChoiceSelectAnswerOptionItem(props: BaseItemProps) {
             valueSelect={valueSelect}
             feedback={feedback}
             readOnly={readOnly}
+            calcExpUpdated={calcExpUpdated}
             isTabled={isTabled}
             renderingExtensions={renderingExtensions}
             onValueChange={handleValueChange}

package/src/components/FormComponents/OpenChoiceItems/OpenChoiceSelectAnswerValueSetField.tsx

@@ -30,6 +30,7 @@ import type { TerminologyError } from '../../../hooks/useValueSetCodings';
 import { useRendererConfigStore } from '../../../stores';
 import { StyledRequiredTypography } from '../Item.styles';
 import DisplayUnitText from '../ItemParts/DisplayUnitText';
+import ExpressionUpdateFadingIcon from '../ItemParts/ExpressionUpdateFadingIcon';
 
 interface OpenChoiceSelectAnswerValueSetFieldProps
   extends PropsWithIsTabledAttribute,
@@ -41,6 +42,7 @@ interface OpenChoiceSelectAnswerValueSetFieldProps
   terminologyError: TerminologyError;
   feedback: string;
   readOnly: boolean;
+  calcExpUpdated: boolean;
   onValueChange: (
     newValue: Coding | string | null,
     reason: AutocompleteChangeReason | string
@@ -55,6 +57,7 @@ function OpenChoiceSelectAnswerValueSetField(props: OpenChoiceSelectAnswerValueS
     terminologyError,
     feedback,
     readOnly,
+    calcExpUpdated,
     isTabled,
     renderingExtensions,
     onValueChange
@@ -95,6 +98,7 @@ function OpenChoiceSelectAnswerValueSetField(props: OpenChoiceSelectAnswerValueS
                 readOnly: readOnly && readOnlyVisualStyle === 'readonly',
                 endAdornment: (
                   <>
+                    <ExpressionUpdateFadingIcon fadeIn={calcExpUpdated} disabled={readOnly} />
                     {params.InputProps.endAdornment}
                     <DisplayUnitText readOnly={readOnly}>{displayUnit}</DisplayUnitText>
                   </>

package/src/components/FormComponents/OpenChoiceItems/OpenChoiceSelectAnswerValueSetItem.tsx

@@ -22,7 +22,7 @@ import useValidationFeedback from '../../../hooks/useValidationFeedback';
 import useValueSetCodings from '../../../hooks/useValueSetCodings';
 import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
 import { useQuestionnaireStore } from '../../../stores';
-import { createEmptyQrItem } from '../../../utils/qrItem';
+import { createEmptyQrItem, getQRItemId } from '../../../utils/qrItem';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import ItemLabel from '../ItemParts/ItemLabel';
@@ -38,9 +38,9 @@ function OpenChoiceSelectAnswerValueSetItem(props: BaseItemProps) {
     renderingExtensions,
     parentIsReadOnly,
     feedbackFromParent,
-    onQrItemChange
+    onQrItemChange,
+    calcExpUpdated
   } = props;
-  // TODO no calcExpUpdated
 
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
@@ -50,7 +50,7 @@ function OpenChoiceSelectAnswerValueSetItem(props: BaseItemProps) {
   const feedback = useValidationFeedback(qItem, feedbackFromParent);
 
   // Init input value
-  const answerKey = qrItem?.answer?.[0]?.id;
+  const answerKey = getQRItemId(qrItem?.answer?.[0]?.id);
   const qrOpenChoice = qrItem ?? createEmptyQrItem(qItem, answerKey);
 
   let valueSelect: Coding | string | null = null;
@@ -131,6 +131,7 @@ function OpenChoiceSelectAnswerValueSetItem(props: BaseItemProps) {
         renderingExtensions={renderingExtensions}
         readOnly={readOnly}
         onValueChange={handleValueChange}
+        calcExpUpdated={calcExpUpdated}
       />
     );
   }
@@ -156,6 +157,7 @@ function OpenChoiceSelectAnswerValueSetItem(props: BaseItemProps) {
             renderingExtensions={renderingExtensions}
             readOnly={readOnly}
             onValueChange={handleValueChange}
+            calcExpUpdated={calcExpUpdated}
           />
         }
       />

package/src/components/FormComponents/QuantityItem/QuantityItem.tsx

@@ -25,7 +25,7 @@ import { useQuestionnaireStore } from '../../../stores';
 import { DEBOUNCE_DURATION } from '../../../utils/debounce';
 import { getDecimalPrecision } from '../../../utils/extensions';
 import { parseDecimalStringWithPrecision } from '../../../utils/parseInputs';
-import { createEmptyQrItem } from '../../../utils/qrItem';
+import { createEmptyQrItem, getQRItemId } from '../../../utils/qrItem';
 import Box from '@mui/material/Box';
 import QuantityField from './QuantityField';
 import {
@@ -71,7 +71,7 @@ function QuantityItem(props: BaseItemProps) {
   }
 
   // Init inputs
-  const answerKey = qrItem?.answer?.[0]?.id;
+  const answerKey = getQRItemId(qrItem?.answer?.[0]?.id);
   let valueQuantity: Quantity = {};
   let initialValueInput = '';
   let initialComparatorInput: Quantity['comparator'] | null = null;

package/src/components/FormComponents/SliderItem/SliderItem.tsx

@@ -17,7 +17,7 @@
 
 import React from 'react';
 import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
-import { createEmptyQrItem } from '../../../utils/qrItem';
+import { createEmptyQrItem, getQRItemId } from '../../../utils/qrItem';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import useReadOnly from '../../../hooks/useReadOnly';
@@ -46,7 +46,7 @@ function SliderItem(props: BaseItemProps) {
   const isInteracted = !!qrItem?.answer;
 
   // Init input value
-  const answerKey = qrItem?.answer?.[0]?.id;
+  const answerKey = getQRItemId(qrItem?.answer?.[0]?.id);
   let valueInteger = 0;
   if (qrItem?.answer) {
     if (qrItem?.answer[0].valueInteger) {

package/src/components/FormComponents/StringItem/StringItem.tsx

@@ -23,7 +23,7 @@ import useValidationFeedback from '../../../hooks/useValidationFeedback';
 import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
 import { useQuestionnaireStore } from '../../../stores';
 import { DEBOUNCE_DURATION } from '../../../utils/debounce';
-import { createEmptyQrItem } from '../../../utils/qrItem';
+import { createEmptyQrItem, getQRItemId } from '../../../utils/qrItem';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import ItemLabel from '../ItemParts/ItemLabel';
@@ -48,7 +48,7 @@ function StringItem(props: BaseItemProps) {
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
   // Init input value
-  const answerKey = qrItem?.answer?.[0]?.id;
+  const answerKey = getQRItemId(qrItem?.answer?.[0]?.id);
   const { initialInput } = readStringValue(qrItem);
 
   const [input, setInput] = useState(initialInput);

package/src/components/FormComponents/TextItem/TextItem.tsx

@@ -19,7 +19,7 @@ import { useCallback, useState } from 'react';
 import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
 import useValidationFeedback from '../../../hooks/useValidationFeedback';
 import debounce from 'lodash.debounce';
-import { createEmptyQrItem } from '../../../utils/qrItem';
+import { createEmptyQrItem, getQRItemId } from '../../../utils/qrItem';
 import { DEBOUNCE_DURATION } from '../../../utils/debounce';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import TextField from './TextField';
@@ -46,7 +46,7 @@ function TextItem(props: BaseItemProps) {
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
   // Init input value
-  const answerKey = qrItem?.answer?.[0]?.id;
+  const answerKey = getQRItemId(qrItem?.answer?.[0]?.id);
   const { initialInput } = readStringValue(qrItem);
 
   const [input, setInput] = useState(initialInput);

package/src/components/FormComponents/TimeItem/TimeItem.tsx

@@ -17,7 +17,7 @@
 
 import React from 'react';
 import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
-import { createEmptyQrItem } from '../../../utils/qrItem';
+import { createEmptyQrItem, getQRItemId } from '../../../utils/qrItem';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import TimeField from './TimeField';
 import type { Dayjs } from 'dayjs';
@@ -44,7 +44,7 @@ function TimeItem(props: BaseItemProps) {
   const { displayPrompt, entryFormat } = renderingExtensions;
 
   // Init input value
-  const answerKey = qrItem?.answer?.[0]?.id;
+  const answerKey = getQRItemId(qrItem?.answer?.[0]?.id);
   let timeString: string | null = null;
   if (qrItem?.answer && qrItem?.answer[0].valueTime) {
     timeString = qrItem.answer[0].valueTime;

package/src/components/FormComponents/UrlItem/UrlItem.tsx

@@ -19,7 +19,7 @@ import React, { useCallback, useState } from 'react';
 import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
 import useValidationFeedback from '../../../hooks/useValidationFeedback';
 import debounce from 'lodash.debounce';
-import { createEmptyQrItem } from '../../../utils/qrItem';
+import { createEmptyQrItem, getQRItemId } from '../../../utils/qrItem';
 import { DEBOUNCE_DURATION } from '../../../utils/debounce';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import UrlField from './UrlField';
@@ -46,7 +46,7 @@ function UrlItem(props: BaseItemProps) {
   const { displayUnit, displayPrompt, entryFormat } = renderingExtensions;
 
   // Init input value
-  const answerKey = qrItem?.answer?.[0]?.id;
+  const answerKey = getQRItemId(qrItem?.answer?.[0]?.id);
   let valueUri = '';
   if (qrItem?.answer && qrItem?.answer[0].valueUri) {
     valueUri = qrItem.answer[0].valueUri;

package/src/hooks/useCalculatedExpressionUpdated.ts

@@ -6,27 +6,37 @@ import { useEffect, useRef, useState } from 'react';
  *
  * Ignores the initial mount (so it won't re-animate when the user switch between tabs).
  */
-export function useCalculatedExpressionUpdated(answerKey: string | undefined): boolean {
+export function useCalculatedExpressionUpdated(
+  answerKey: string | undefined,
+  answerSnapshot?: string | undefined
+): boolean {
   const [animating, setAnimating] = useState(false);
   const previousAnswerKey = useRef<string | null>(null);
+  const previousAnswerSnapshot = useRef<string | null>(null);
   const mounted = useRef(false);
 
   useEffect(() => {
-    // Skip the first render — just store the current key
+    // Skip the first render — just store the current key/snapshot
     if (!mounted.current) {
       mounted.current = true;
       previousAnswerKey.current = answerKey ?? null;
+      previousAnswerSnapshot.current = answerSnapshot ?? null;
       return;
     }
 
-    // Answer key has changed, and it is a calculatedExpression
-    if (
-      answerKey &&
-      answerKey !== previousAnswerKey.current &&
-      // values generated via calculatedExpression will have "calculatedExpression" in their key e.g. obs-bmi-calculatedExpression-_Cye5_m-d4cjxZqY4-9XL
-      answerKey.includes('calculatedExpression')
-    ) {
-      previousAnswerKey.current = answerKey;
+    // Determine whether the answer changed. If an answerSnapshot is provided we use
+    // that to detect value changes (useful when the answer id stays the same).
+    const changed =
+      answerSnapshot !== undefined
+        ? answerSnapshot !== previousAnswerSnapshot.current
+        : !!answerKey && answerKey !== previousAnswerKey.current;
+
+    const isCalculated = !!answerKey && answerKey.includes('calculatedExpression');
+
+    // Answer changed and it is a calculatedExpression
+    if (changed && isCalculated) {
+      previousAnswerKey.current = answerKey ?? null;
+      previousAnswerSnapshot.current = answerSnapshot ?? null;
       setAnimating(true);
 
       const timer = setTimeout(() => setAnimating(false), 700);
@@ -34,8 +44,12 @@ export function useCalculatedExpressionUpdated(answerKey: string | undefined): b
       return () => clearTimeout(timer);
     }
 
+    // Always advance the stored values so we don't re-fire due to transient undefined/null
+    previousAnswerKey.current = answerKey ?? null;
+    previousAnswerSnapshot.current = answerSnapshot ?? null;
+
     return undefined;
-  }, [answerKey]);
+  }, [answerKey, answerSnapshot]);
 
   return animating;
 }

package/src/hooks/useParseXhtml.tsx

@@ -16,8 +16,8 @@
  */
 
 import React, { useMemo } from 'react';
-import { getXHtmlString } from '../utils/extensions';
-import type { QuestionnaireItem } from 'fhir/r4';
+import { getXHtmlStringFromExtension } from '../utils/extensions';
+import type { Element } from 'fhir/r4';
 import type { HTMLReactParserOptions } from 'html-react-parser';
 import { attributesToProps, default as htmlParse, domToReact } from 'html-react-parser';
 import type { Attributes } from 'html-react-parser/lib/attributes-to-props';
@@ -27,9 +27,12 @@ export interface ParsedXhtml {
   styles?: Record<string, string>;
 }
 
-export function useParseXhtml(qItem: QuestionnaireItem): ParsedXhtml | null {
+export function useParseXhtml(
+  element: Element | undefined,
+  text: string | null | undefined
+): ParsedXhtml | null {
   return useMemo(() => {
-    let xHtmlString = getXHtmlString(qItem);
+    let xHtmlString = getXHtmlStringFromExtension(element?.extension || []);
 
     if (xHtmlString === null || xHtmlString === '') {
       return null;
@@ -37,7 +40,7 @@ export function useParseXhtml(qItem: QuestionnaireItem): ParsedXhtml | null {
 
     // Replace <img with alt text - only if there are no alt tags
     if (!xHtmlString.includes('alt=') && !xHtmlString.includes('alt =')) {
-      const altText = `<img alt='${qItem.text}'`;
+      const altText = `<img alt='${text}'`;
       xHtmlString = xHtmlString.replace('<img', altText);
     }
 
@@ -137,7 +140,7 @@ export function useParseXhtml(qItem: QuestionnaireItem): ParsedXhtml | null {
       content: parsedContent,
       styles: extractedStyles
     };
-  }, [qItem]);
+  }, [element, text]);
 }
 
 export function getStylesFromClass(className: string): Record<string, string> | null {