@aehrc/smart-forms-renderer 1.2.11 → 1.2.13

package/src/components/FormComponents/ChoiceItems/ChoiceAutocompleteField.tsx

@@ -36,6 +36,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 ChoiceAutocompleteFieldsProps
   extends PropsWithIsTabledAttribute,
@@ -47,6 +48,8 @@ interface ChoiceAutocompleteFieldsProps
   loading: boolean;
   feedback: { message: string; color: AlertColor } | null;
   readOnly: boolean;
+  calcExpUpdated: boolean;
+
   onInputChange: (newInput: string) => void;
   onValueChange: (newValue: Coding | null) => void;
 }
@@ -59,6 +62,7 @@ function ChoiceAutocompleteField(props: ChoiceAutocompleteFieldsProps) {
     loading,
     feedback,
     readOnly,
+    calcExpUpdated,
     isTabled,
     renderingExtensions,
     onInputChange,
@@ -123,6 +127,7 @@ function ChoiceAutocompleteField(props: ChoiceAutocompleteFieldsProps) {
                       </Tooltip>
                     </Fade>
                   ) : null}
+                  <ExpressionUpdateFadingIcon fadeIn={calcExpUpdated} disabled={readOnly} />
                   {params.InputProps.endAdornment}
                   <DisplayUnitText readOnly={readOnly}>{displayUnit}</DisplayUnitText>
                 </>

package/src/components/FormComponents/ChoiceItems/ChoiceAutocompleteItem.tsx

@@ -26,7 +26,7 @@ import useValidationFeedback from '../../../hooks/useValidationFeedback';
 import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
 import { useQuestionnaireStore } from '../../../stores';
 import { AUTOCOMPLETE_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';
@@ -41,14 +41,14 @@ function ChoiceAutocompleteItem(props: BaseItemProps) {
     renderingExtensions,
     parentIsReadOnly,
     feedbackFromParent,
-    onQrItemChange
+    onQrItemChange,
+    calcExpUpdated
   } = props;
-  // TODO no calcExpUpdated
 
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
   // Init input value
-  const answerKey = qrItem?.answer?.[0]?.id;
+  const answerKey = getQRItemId(qrItem?.answer?.[0]?.id);
   const qrChoice = qrItem ?? createEmptyQrItem(qItem, answerKey);
 
   let valueCoding: Coding | undefined;
@@ -108,6 +108,7 @@ function ChoiceAutocompleteItem(props: BaseItemProps) {
         loading={loading}
         feedback={feedback}
         readOnly={readOnly}
+        calcExpUpdated={calcExpUpdated}
         isTabled={isTabled}
         renderingExtensions={renderingExtensions}
         onInputChange={setInput}
@@ -134,6 +135,7 @@ function ChoiceAutocompleteItem(props: BaseItemProps) {
             loading={loading}
             feedback={feedback}
             readOnly={readOnly}
+            calcExpUpdated={calcExpUpdated}
             isTabled={isTabled}
             renderingExtensions={renderingExtensions}
             onInputChange={setInput}

package/src/components/FormComponents/ChoiceItems/ChoiceCheckboxAnswerOptionItem.tsx

@@ -21,7 +21,7 @@ import useValidationFeedback from '../../../hooks/useValidationFeedback';
 import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
 import { useQuestionnaireStore } from '../../../stores';
 import { updateChoiceCheckboxAnswers } from '../../../utils/choice';
-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';
@@ -44,7 +44,7 @@ function ChoiceCheckboxAnswerOptionItem(props: BaseItemProps) {
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
   // Init input value
-  const answerKey = qrItem?.answer?.[0]?.id;
+  const answerKey = getQRItemId(qrItem?.answer?.[0]?.id);
   const qrChoiceCheckbox = qrItem ?? createEmptyQrItem(qItem, answerKey);
   const answers = qrChoiceCheckbox.answer ?? [];
 

package/src/components/FormComponents/ChoiceItems/ChoiceCheckboxAnswerValueSetItem.tsx

@@ -23,7 +23,7 @@ import useValueSetCodings from '../../../hooks/useValueSetCodings';
 import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
 import { useQuestionnaireStore } from '../../../stores';
 import { convertCodingsToAnswerOptions, updateChoiceCheckboxAnswers } from '../../../utils/choice';
-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';
@@ -46,7 +46,7 @@ function ChoiceCheckboxAnswerValueSetItem(props: BaseItemProps) {
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
   // Init input value
-  const answerKey = qrItem?.answer?.[0]?.id;
+  const answerKey = getQRItemId(qrItem?.answer?.[0]?.id);
   const qrChoiceCheckbox = qrItem ?? createEmptyQrItem(qItem, answerKey);
   const answers = qrChoiceCheckbox.answer ?? [];
 

package/src/components/FormComponents/ChoiceItems/ChoiceRadioAnswerOptionItem.tsx

@@ -24,7 +24,7 @@ import { ChoiceItemControl } from '../../../interfaces/choice.enum';
 import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
 import { useQuestionnaireStore } from '../../../stores';
 import { findInAnswerOptions, getChoiceControlType, getQrChoiceValue } from '../../../utils/choice';
-import { createEmptyQrItem } from '../../../utils/qrItem';
+import { createEmptyQrItem, getQRItemId } from '../../../utils/qrItem';
 import ChoiceRadioAnswerOptionView from './ChoiceRadioAnswerOptionView';
 import ChoiceSelectAnswerOptionView from './ChoiceSelectAnswerOptionView';
 
@@ -44,7 +44,7 @@ function ChoiceRadioAnswerOptionItem(props: BaseItemProps) {
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
   // Init input value
-  const answerKey = qrItem?.answer?.[0]?.id;
+  const answerKey = getQRItemId(qrItem?.answer?.[0]?.id);
   const qrChoice = qrItem ?? createEmptyQrItem(qItem, answerKey);
   const valueChoice = getQrChoiceValue(qrChoice);
 

package/src/components/FormComponents/ChoiceItems/ChoiceRadioAnswerValueSetItem.tsx

@@ -23,7 +23,7 @@ import useValueSetCodings from '../../../hooks/useValueSetCodings';
 import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
 import { useQuestionnaireStore } from '../../../stores';
 import { convertCodingsToAnswerOptions, findInAnswerOptions } from '../../../utils/choice';
-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';
@@ -44,7 +44,7 @@ function ChoiceRadioAnswerValueSetItem(props: BaseItemProps) {
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
   // Init input value
-  const answerKey = qrItem?.answer?.[0]?.id;
+  const answerKey = getQRItemId(qrItem?.answer?.[0]?.id);
   const qrChoiceRadio = qrItem ?? createEmptyQrItem(qItem, answerKey);
 
   let valueRadio: string | null = null;

package/src/components/FormComponents/ChoiceItems/ChoiceRadioSingle.tsx

@@ -22,7 +22,7 @@ import { StandardRadio } from '../../Radio.styles';
 
 interface ChoiceRadioSingleProps {
   value: string;
-  label: string;
+  label: React.ReactNode;
   readOnly: boolean;
   disabledViaToggleExpression: boolean;
   fullWidth: boolean;

package/src/components/FormComponents/ChoiceItems/ChoiceSelectAnswerOptionFields.tsx

@@ -15,6 +15,7 @@
  * limitations under the License.
  */
 
+import React from 'react';
 import Autocomplete from '@mui/material/Autocomplete';
 import type { QuestionnaireItem, QuestionnaireItemAnswerOption } from 'fhir/r4';
 import type {
@@ -28,6 +29,7 @@ import { StyledRequiredTypography } from '../Item.styles';
 import DisplayUnitText from '../ItemParts/DisplayUnitText';
 import ExpressionUpdateFadingIcon from '../ItemParts/ExpressionUpdateFadingIcon';
 import { StandardTextField } from '../Textfield.styles';
+import StyledText from '../ItemParts/StyledText';
 
 interface ChoiceSelectAnswerOptionFieldsProps
   extends PropsWithIsTabledAttribute,
@@ -61,6 +63,12 @@ function ChoiceSelectAnswerOptionFields(props: ChoiceSelectAnswerOptionFieldsPro
 
   const { displayUnit, displayPrompt, entryFormat } = renderingExtensions;
 
+  const [inputValue, setInputValue] = React.useState('');
+
+  // Keep track of current selected value when input is changed
+  const [currentValueSelect, setCurrentValueSelect] =
+    React.useState<QuestionnaireItemAnswerOption | null>(valueSelect);
+
   return (
     <>
       <Autocomplete
@@ -70,15 +78,50 @@ function ChoiceSelectAnswerOptionFields(props: ChoiceSelectAnswerOptionFieldsPro
         getOptionDisabled={(option) => isOptionDisabled(option, answerOptionsToggleExpressionsMap)}
         getOptionLabel={(option) => getAnswerOptionLabel(option)}
         isOptionEqualToValue={(option, value) => compareAnswerOptionValue(option, value)}
-        onChange={(_, newValue) => onSelectChange(newValue)}
+        onChange={(_, newValue) => {
+          onSelectChange(newValue);
+          setCurrentValueSelect(newValue);
+        }}
+        inputValue={inputValue}
+        onInputChange={(_, newInputValue, reason) => {
+          if (!inputValue && valueSelect && reason !== 'clear') {
+            // Convert current input value to be the current value plus additional input
+            onSelectChange(null);
+            setInputValue(getAnswerOptionLabel(valueSelect) + newInputValue);
+          } else {
+            setInputValue(newInputValue);
+          }
+        }}
+        onBlur={() => {
+          // Set value on blur if there is any current input
+          if (currentValueSelect) {
+            onSelectChange(currentValueSelect);
+            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
+              onSelectChange(null);
+              setInputValue(getAnswerOptionLabel(valueSelect));
+            }
+          }
+        }}
         autoHighlight
-        sx={{ maxWidth: !isTabled ? textFieldWidth : 3000, minWidth: 160, flexGrow: 1 }}
+        sx={{
+          maxWidth: !isTabled ? textFieldWidth : 3000,
+          minWidth: 160,
+          flexGrow: 1,
+          '& .MuiAutocomplete-tag': {
+            mx: 0
+          }
+        }}
         size="small"
         disabled={readOnly && readOnlyVisualStyle === 'disabled'}
         readOnly={readOnly && readOnlyVisualStyle === 'readonly'}
         renderInput={(params) => (
           <StandardTextField
-            multiline
             textFieldWidth={textFieldWidth}
             isTabled={isTabled}
             placeholder={entryFormat || displayPrompt}
@@ -93,11 +136,57 @@ function ChoiceSelectAnswerOptionFields(props: ChoiceSelectAnswerOptionFieldsPro
                     <ExpressionUpdateFadingIcon fadeIn={expressionUpdated} disabled={readOnly} />
                     <DisplayUnitText readOnly={readOnly}>{displayUnit}</DisplayUnitText>
                   </>
-                )
+                ),
+                sx: {
+                  '&.MuiOutlinedInput-root.MuiInputBase-sizeSmall .MuiAutocomplete-input': {
+                    paddingLeft: '0px'
+                  }
+                },
+                inputProps: {
+                  ...params.inputProps,
+                  ...(isTabled
+                    ? { 'aria-label': qItem.text ?? 'Unnamed choice dropdown' }
+                    : { 'aria-labelledby': `label-${qItem.linkId}` }),
+                  role: 'combobox'
+                }
               }
             }}
           />
         )}
+        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) => {
+          const selectedOption = options.find((opt) => opt.valueString === value.valueString);
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { onDelete, ...rest } = getItemProps();
+          return (
+            <span {...rest}>
+              {value.valueString && selectedOption ? (
+                <StyledText
+                  textToDisplay={getAnswerOptionLabel(value)}
+                  element={selectedOption._valueString}
+                />
+              ) : (
+                getAnswerOptionLabel(value)
+              )}
+            </span>
+          );
+        }}
       />
 
       {feedback ? <StyledRequiredTypography>{feedback}</StyledRequiredTypography> : null}

package/src/components/FormComponents/ChoiceItems/ChoiceSelectAnswerOptionItem.tsx

@@ -22,7 +22,7 @@ import useValidationFeedback from '../../../hooks/useValidationFeedback';
 import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
 import { useQuestionnaireStore } from '../../../stores';
 import { findInAnswerOptions, getQrChoiceValue } from '../../../utils/choice';
-import { createEmptyQrItem } from '../../../utils/qrItem';
+import { createEmptyQrItem, getQRItemId } from '../../../utils/qrItem';
 import ChoiceSelectAnswerOptionView from './ChoiceSelectAnswerOptionView';
 
 function ChoiceSelectAnswerOptionItem(props: BaseItemProps) {
@@ -46,7 +46,7 @@ function ChoiceSelectAnswerOptionItem(props: BaseItemProps) {
   const feedback = useValidationFeedback(qItem, feedbackFromParent);
 
   // Init input value
-  const answerKey = qrItem?.answer?.[0]?.id;
+  const answerKey = getQRItemId(qrItem?.answer?.[0]?.id);
   const qrChoice = qrItem ?? createEmptyQrItem(qItem, answerKey);
   const valueChoice = getQrChoiceValue(qrChoice);
 

package/src/components/FormComponents/ChoiceItems/ChoiceSelectAnswerValueSetFields.tsx

@@ -85,7 +85,6 @@ function ChoiceSelectAnswerValueSetFields(props: ChoiceSelectAnswerValueSetField
           readOnly={readOnly && readOnlyVisualStyle === 'readonly'}
           renderInput={(params) => (
             <StandardTextField
-              multiline
               textFieldWidth={textFieldWidth}
               isTabled={isTabled}
               placeholder={entryFormat || displayPrompt}
@@ -103,7 +102,10 @@ function ChoiceSelectAnswerValueSetFields(props: ChoiceSelectAnswerValueSetField
                   ),
                   inputProps: {
                     ...params.inputProps,
-                    'aria-label': qItem.text ?? 'Unnamed choice dropdown'
+                    ...(isTabled
+                      ? { 'aria-label': qItem.text ?? 'Unnamed choice dropdown' }
+                      : { 'aria-labelledby': `label-${qItem.linkId}` }),
+                    role: 'combobox'
                   }
                 }
               }}

package/src/components/FormComponents/ChoiceItems/ChoiceSelectAnswerValueSetItem.tsx

@@ -24,7 +24,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';
@@ -46,7 +46,7 @@ function ChoiceSelectAnswerValueSetItem(props: BaseItemProps) {
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
   // Init input value
-  const answerKey = qrItem?.answer?.[0]?.id;
+  const answerKey = getQRItemId(qrItem?.answer?.[0]?.id);
   const qrChoiceSelect = qrItem ?? createEmptyQrItem(qItem, answerKey);
 
   let valueCoding: Coding | null = null;

package/src/components/FormComponents/DateTimeItems/CustomDateItem/CustomDateItem.tsx

@@ -20,7 +20,7 @@ import useDateValidation from '../../../../hooks/useDateValidation';
 import useReadOnly from '../../../../hooks/useReadOnly';
 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';
@@ -49,7 +49,7 @@ function CustomDateItem(props: BaseItemProps) {
   const { displayPrompt, entryFormat } = renderingExtensions;
 
   // Init input value
-  const answerKey = qrItem?.answer?.[0]?.id;
+  const answerKey = getQRItemId(qrItem?.answer?.[0]?.id);
   const qrDate = qrItem ?? createEmptyQrItem(qItem, answerKey);
   let valueDate: string = '';
   if (qrDate.answer) {

package/src/components/FormComponents/DateTimeItems/CustomDateTimeItem/CustomDateTimeItem.tsx

@@ -25,7 +25,7 @@ import useReadOnly from '../../../../hooks/useReadOnly';
 import useTimeValidation from '../../../../hooks/useTimeValidation';
 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';
@@ -56,7 +56,7 @@ function CustomDateTimeItem(props: BaseItemProps) {
   const { displayPrompt, entryFormat } = renderingExtensions;
 
   // Init input value
-  const answerKey = qrItem?.answer?.[0]?.id;
+  const answerKey = getQRItemId(qrItem?.answer?.[0]?.id);
   const qrDateTime = qrItem ?? createEmptyQrItem(qItem, answerKey);
 
   // Store dateTime in FHIR and DayJs formats for downstream parsing

package/src/components/FormComponents/DateTimeItems/CustomDateTimeItem/CustomTimeField.tsx

@@ -25,6 +25,7 @@ import type { PropsWithIsTabledAttribute } from '../../../../interfaces/renderPr
 import { useRendererConfigStore } from '../../../../stores';
 import FormControl from '@mui/material/FormControl';
 import MuiTextField from '../../TextItem/MuiTextField';
+import ExpressionUpdateFadingIcon from '../../ItemParts/ExpressionUpdateFadingIcon';
 
 interface CustomTimeFieldProps extends PropsWithIsTabledAttribute {
   linkId: string;
@@ -51,12 +52,12 @@ function CustomTimeField(props: CustomTimeFieldProps) {
     feedback,
     displayPrompt,
     readOnly,
+    calcExpUpdated,
     isPartOfDateTime,
     isTabled,
     onTimeInputChange,
     onPeriodChange
   } = props;
-  // TODO this component doesn't have a calcExpUpdated update animation
 
   const readOnlyVisualStyle = useRendererConfigStore.use.readOnlyVisualStyle();
   const textFieldWidth = useRendererConfigStore.use.textFieldWidth();
@@ -112,6 +113,7 @@ function CustomTimeField(props: CustomTimeFieldProps) {
             <MenuItem value="PM">PM</MenuItem>
           </Select>
         </FormControl>
+        <ExpressionUpdateFadingIcon fadeIn={calcExpUpdated} disabled={readOnly} />
       </Box>
       <Typography component="span" variant="caption" color="error" sx={{ ml: 1.75, mt: -0.5 }}>
         {feedback}

package/src/components/FormComponents/DecimalItem/DecimalItem.tsx

@@ -27,7 +27,7 @@ import {
   parseDecimalStringToFloat,
   parseDecimalStringWithPrecision
 } from '../../../utils/parseInputs';
-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';
@@ -53,7 +53,7 @@ function DecimalItem(props: BaseItemProps) {
   const precision = getDecimalPrecision(qItem);
 
   // Init input value
-  const answerKey = qrItem?.answer?.[0]?.id;
+  const answerKey = getQRItemId(qrItem?.answer?.[0]?.id);
   const { initialInput } = readDecimalValue(qrItem, precision);
 
   const [input, setInput] = useState(initialInput);

package/src/components/FormComponents/GroupItem/GroupItemView.tsx

@@ -87,7 +87,7 @@ function GroupItemView(props: GroupItemViewProps) {
   } = props;
 
   // If XHTML has styles, pass them to the GroupItemView so it cna be applied down the tree
-  const xhtmlStyles = useParseXhtml(qItem)?.styles;
+  const xhtmlStyles = useParseXhtml(qItem._text, qItem.text)?.styles;
 
   // Combine parent styles with this group's styles
   const combinedStyles = React.useMemo(() => {

package/src/components/FormComponents/IntegerItem/IntegerItem.tsx

@@ -23,7 +23,7 @@ import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
 import { useQuestionnaireStore } from '../../../stores';
 import { DEBOUNCE_DURATION } from '../../../utils/debounce';
 import { parseIntegerString } from '../../../utils/parseInputs';
-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';
@@ -47,7 +47,7 @@ function IntegerItem(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 } = readIntegerValue(qrItem);
 
   const [input, setInput] = useState(initialInput);

package/src/components/FormComponents/ItemParts/CheckboxSingle.tsx

@@ -22,7 +22,8 @@ import { useRendererConfigStore } from '../../../stores';
 
 interface CheckboxSingleProps {
   value: string;
-  label: string;
+  label: React.ReactNode;
+  labelText?: string;
   readOnly: boolean;
   disabledViaToggleExpression: boolean;
   fullWidth: boolean;
@@ -34,6 +35,7 @@ function CheckboxSingle(props: CheckboxSingleProps) {
   const {
     value,
     label,
+    labelText,
     readOnly,
     disabledViaToggleExpression,
     fullWidth,
@@ -80,7 +82,7 @@ function CheckboxSingle(props: CheckboxSingleProps) {
           }}
           slotProps={{
             input: {
-              'aria-label': label ?? 'Unnamed checkbox'
+              'aria-label': (typeof label === 'string' ? label : labelText) ?? 'Unnamed checkbox'
             }
           }}
         />

package/src/components/FormComponents/ItemParts/ItemLabel.tsx

@@ -27,8 +27,6 @@ import ItemTextSwitcher from './ItemTextSwitcher';
 import Typography from '@mui/material/Typography';
 import FlyoverItem from './FlyoverItem';
 import type { PropsWithParentStylesAttribute } from '../../../interfaces/renderProps.interface';
-import { structuredDataCapture } from 'fhir-sdc-helpers';
-import { default as parseStyleToJs } from 'style-to-js';
 
 interface ItemLabelProps extends PropsWithParentStylesAttribute {
   qItem: QuestionnaireItem;
@@ -53,10 +51,6 @@ const ItemLabel = memo(function ItemLabel(props: ItemLabelProps) {
   const readOnlyTextColor = readOnlyVisualStyle === 'disabled' ? 'text.disabled' : 'text.secondary';
   const textColor = parentStyles?.color || (readOnly ? readOnlyTextColor : 'text.primary');
 
-  // Get styles from qItem._text
-  const stylesString = structuredDataCapture.getStyle(qItem._text);
-  const itemStyles = stylesString ? parseStyleToJs(stylesString) : {};
-
   return (
     <Box display="flex" alignItems="center" justifyContent="space-between">
       <Box position="relative" display="flex" flexGrow={1} alignItems="center">
@@ -72,8 +66,7 @@ const ItemLabel = memo(function ItemLabel(props: ItemLabelProps) {
           sx={{
             mt: 0.5,
             flexGrow: 1,
-            ...(parentStyles || {}),
-            ...itemStyles
+            ...(parentStyles || {})
           }}>
           {/* Required asterisk position is in front of text */}
           {required && requiredIndicatorPosition === 'start' ? (

package/src/components/FormComponents/ItemParts/ItemTextSwitcher.tsx

@@ -1,10 +1,8 @@
 import React, { memo } from 'react';
-import ReactMarkdown from 'react-markdown';
-import { getMarkdownString } from '../../../utils/extensions';
-import { useParseXhtml } from '../../../hooks/useParseXhtml';
 import useDisplayCqfAndCalculatedExpression from '../../../hooks/useDisplayCqfAndCalculatedExpression';
 import type { QuestionnaireItem } from 'fhir/r4';
 import { getItemTextToDisplay } from '../../../utils/itemTextToDisplay';
+import StyledText from './StyledText';
 
 interface ItemTextSwitcherProps {
   qItem: QuestionnaireItem;
@@ -24,29 +22,9 @@ const ItemTextSwitcher = memo(function ItemTextSwitcher({ qItem }: ItemTextSwitc
   const itemTextAriaLabel =
     useDisplayCqfAndCalculatedExpression(qItem, 'item._text.aria-label') ?? undefined;
 
-  // parse XHTML if found
-  const parsedXhtml = useParseXhtml(qItem);
-  if (parsedXhtml) {
-    return <span aria-label={itemTextAriaLabel}>{parsedXhtml.content}</span>;
-  }
-
-  // parse markdown if found
-  const markdownString = getMarkdownString(qItem);
-  if (markdownString) {
-    return (
-      <span aria-label={itemTextAriaLabel}>
-        <ReactMarkdown>{markdownString}</ReactMarkdown>
-      </span>
-    );
-  }
-
-  // labelText is empty, return null
-  if (!itemTextToDisplay) {
-    return null;
-  }
+  const content = <StyledText textToDisplay={itemTextToDisplay} element={qItem._text} />;
 
-  // parse regular text
-  return <span aria-label={itemTextAriaLabel}>{itemTextToDisplay}</span>;
+  return content ? <span aria-label={itemTextAriaLabel}>{content}</span> : null;
 });
 
 export default ItemTextSwitcher;

package/src/components/FormComponents/ItemParts/RadioOptionList.tsx

@@ -19,6 +19,7 @@ import React from 'react';
 import ChoiceRadioSingle from '../ChoiceItems/ChoiceRadioSingle';
 import type { QuestionnaireItemAnswerOption } from 'fhir/r4';
 import { isOptionDisabled } from '../../../utils/choice';
+import StyledText from './StyledText';
 
 interface RadioOptionListProps {
   options: QuestionnaireItemAnswerOption[];
@@ -56,7 +57,9 @@ function RadioOptionList(props: RadioOptionListProps) {
             <ChoiceRadioSingle
               key={option.valueString}
               value={option.valueString}
-              label={option.valueString}
+              label={
+                <StyledText textToDisplay={option.valueString} element={option._valueString} />
+              }
               readOnly={readOnly}
               disabledViaToggleExpression={optionDisabledViaToggleExpression}
               fullWidth={fullWidth}

package/src/components/FormComponents/ItemParts/StyledText.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import { getMarkdownString } from '../../../utils/extensions';
+import { useParseXhtml } from '../../../hooks/useParseXhtml';
+import type { Element } from 'fhir/r4';
+import { structuredDataCapture } from 'fhir-sdc-helpers';
+import { default as parseStyleToJs } from 'style-to-js';
+
+interface StyledTextProps {
+  textToDisplay: string | null;
+  element: Element | undefined;
+}
+
+function StyledText({ textToDisplay, element }: StyledTextProps) {
+  // parse XHTML if found
+  const parsedXhtml = useParseXhtml(element, textToDisplay);
+  if (parsedXhtml) {
+    return parsedXhtml.content;
+  }
+
+  // parse markdown if found
+  const markdownString = getMarkdownString(element);
+  if (markdownString) {
+    return (
+      <ReactMarkdown
+        components={{
+          p: (props) => <span {...props} />
+        }}>
+        {markdownString}
+      </ReactMarkdown>
+    );
+  }
+
+  // labelText is empty, return null
+  if (!textToDisplay) {
+    return null;
+  }
+
+  const stylesString = structuredDataCapture.getStyle(element);
+  const itemStyles = stylesString ? parseStyleToJs(stylesString) : {};
+
+  // parse regular text
+  return <span style={itemStyles}>{textToDisplay}</span>;
+}
+
+export default StyledText;