@aehrc/smart-forms-renderer 1.0.0-alpha.99 → 1.1.0

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

@@ -15,30 +15,28 @@
  * limitations under the License.
  */
 
-import React, { useState } from 'react';
-import type { BaseItemProps } from '../../../../interfaces/renderProps.interface';
+import Stack from '@mui/material/Stack';
+import type { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
+import { useState } from 'react';
+import useDateNonEmptyValidation from '../../../../hooks/useDateTimeNonEmpty';
+import useDateValidation from '../../../../hooks/useDateValidation';
 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 { FullWidthFormComponentBox } from '../../../Box.styles';
 import ItemFieldGrid from '../../ItemParts/ItemFieldGrid';
-import { createEmptyQrItem } from '../../../../utils/qrItem';
-import useDateValidation from '../../../../hooks/useDateValidation';
-import { useQuestionnaireStore } from '../../../../stores';
+import ItemLabel from '../../ItemParts/ItemLabel';
 import { parseFhirDateToDisplayDate } from '../utils';
 import { parseInputDateToFhirDate, validateDateInput } from '../utils/parseDate';
-import Stack from '@mui/material/Stack';
-import type { Dayjs } from 'dayjs';
-import dayjs from 'dayjs';
 import {
   parseDateTimeToDisplayTime,
   parseInputDateTimeToFhirDateTime,
   validateTimeInput
 } from '../utils/parseTime';
-import useTimeValidation from '../../../../hooks/useTimeValidation';
-import useDateNonEmptyValidation from '../../../../hooks/useDateTimeNonEmpty';
 import DateTimeField from './DateTimeField';
-import ItemLabel from '../../ItemParts/ItemLabel';
-import useShowFeedback from '../../../../hooks/useShowFeedback';
-import useDateTimeCalculatedExpression from '../../../../hooks/useDateTimeCalculatedExpression';
 
 function CustomDateTimeItem(props: BaseItemProps) {
   const {
@@ -48,6 +46,7 @@ function CustomDateTimeItem(props: BaseItemProps) {
     isTabled,
     renderingExtensions,
     parentIsReadOnly,
+    calcExpUpdated,
     onQrItemChange
   } = props;
 
@@ -105,34 +104,6 @@ function CustomDateTimeItem(props: BaseItemProps) {
 
   dateFeedback = useDateNonEmptyValidation(dateInput, timeInput, dateFeedback, timeFeedback);
 
-  // Provides a way to hide the feedback when the user is typing
-  const { showFeedback, setShowFeedback, hasBlurred, setHasBlurred } = useShowFeedback();
-
-  // Process calculated expressions
-  const { calcExpUpdated } = useDateTimeCalculatedExpression({
-    qItem: qItem,
-    valueDateTimeFhir: valueDateTimeFhir,
-    onChangeByCalcExpressionString: (newValueDateTimeFhir: string) => {
-      const { displayDate } = parseFhirDateToDisplayDate(newValueDateTimeFhir);
-      const { displayTime, displayPeriod } = parseDateTimeToDisplayTime(dateTimeDayJs);
-
-      setDateInput(displayDate);
-      setTimeInput(displayTime);
-      setPeriodInput(displayPeriod);
-
-      onQrItemChange({
-        ...createEmptyQrItem(qItem, answerKey),
-        answer: [{ id: answerKey, valueDateTime: newValueDateTimeFhir }]
-      });
-    },
-    onChangeByCalcExpressionNull: () => {
-      setDateInput('');
-      setTimeInput('');
-      setPeriodInput('');
-      onQrItemChange(createEmptyQrItem(qItem, answerKey));
-    }
-  });
-
   function handleSelectDate(selectedDate: string) {
     setDateInput(selectedDate);
     updateQRDateTime(selectedDate, timeInput, periodInput, is24HourNotation);
@@ -141,11 +112,6 @@ function CustomDateTimeItem(props: BaseItemProps) {
   function handleDateInputChange(newDateInput: string) {
     setDateInput(newDateInput);
 
-    // Only suppress feedback once (before first blur)
-    if (!hasBlurred) {
-      setShowFeedback(false);
-    }
-
     if (newDateInput === '') {
       onQrItemChange(createEmptyQrItem(qItem, answerKey));
       return;
@@ -158,20 +124,10 @@ function CustomDateTimeItem(props: BaseItemProps) {
     updateQRDateTime(newDateInput, timeInput, periodInput, is24HourNotation);
   }
 
-  function handleDateBlur() {
-    setShowFeedback(true);
-    setHasBlurred(true); // From now on, feedback should stay visible
-  }
-
   function handleTimeInputChange(newTimeInput: string, newPeriodInput: string) {
     setTimeInput(newTimeInput);
     setPeriodInput(newPeriodInput);
 
-    // Only suppress feedback once (before first blur)
-    if (!hasBlurred) {
-      setShowFeedback(false);
-    }
-
     if (newTimeInput === '') {
       updateQRDateTime(dateInput, '', '', false);
       return;
@@ -185,11 +141,6 @@ function CustomDateTimeItem(props: BaseItemProps) {
     updateQRDateTime(dateInput, newTimeInput, newPeriodInput, is24HourNotation);
   }
 
-  function handleTimeBlur() {
-    setShowFeedback(true);
-    setHasBlurred(true); // From now on, feedback should stay visible
-  }
-
   function updateQRDateTime(
     dateInput: string,
     timeInput: string,
@@ -218,8 +169,6 @@ function CustomDateTimeItem(props: BaseItemProps) {
     });
   }
 
-  // FIXME entryFormat and displayPrompt, put them beneath the entire component instead of at the date field
-
   if (isRepeated) {
     return (
       <Stack width="100%">
@@ -232,8 +181,8 @@ function CustomDateTimeItem(props: BaseItemProps) {
           timeInput={timeInput}
           periodInput={periodInput}
           is24HourNotation={is24HourNotation}
-          dateFeedback={showFeedback ? dateFeedback : ''}
-          timeFeedback={showFeedback ? timeFeedback : ''}
+          dateFeedback={dateFeedback ?? ''}
+          timeFeedback={timeFeedback ?? ''}
           dateFocused={dateFocused}
           displayPrompt={displayPrompt}
           entryFormat={entryFormat}
@@ -244,9 +193,6 @@ function CustomDateTimeItem(props: BaseItemProps) {
           onSelectDate={handleSelectDate}
           setDateFocused={setDateFocused}
           onTimeInputChange={handleTimeInputChange}
-          onDateBlur={handleDateBlur}
-          onTimeBlur={handleTimeBlur}
-          showFeedback={showFeedback}
         />
       </Stack>
     );
@@ -256,6 +202,7 @@ function CustomDateTimeItem(props: BaseItemProps) {
     <FullWidthFormComponentBox
       data-test="q-item-datetime-box"
       data-linkid={qItem.linkId}
+      data-label={qItem.text}
       onClick={() => onFocusLinkId(qItem.linkId)}>
       <ItemFieldGrid
         qItem={qItem}
@@ -271,8 +218,8 @@ function CustomDateTimeItem(props: BaseItemProps) {
             timeInput={timeInput}
             periodInput={periodInput}
             is24HourNotation={is24HourNotation}
-            dateFeedback={showFeedback ? dateFeedback : ''}
-            timeFeedback={showFeedback ? timeFeedback : ''}
+            dateFeedback={dateFeedback ?? ''}
+            timeFeedback={timeFeedback ?? ''}
             dateFocused={dateFocused}
             displayPrompt={displayPrompt}
             entryFormat={entryFormat}
@@ -283,13 +230,10 @@ function CustomDateTimeItem(props: BaseItemProps) {
             onSelectDate={handleSelectDate}
             setDateFocused={setDateFocused}
             onTimeInputChange={handleTimeInputChange}
-            onDateBlur={handleDateBlur}
-            onTimeBlur={handleTimeBlur}
-            showFeedback={showFeedback}
           />
         }
-        dateFeedback={showFeedback ? dateFeedback : undefined}
-        timeFeedback={showFeedback ? timeFeedback : undefined}
+        dateFeedback={dateFeedback ?? undefined}
+        timeFeedback={timeFeedback ?? undefined}
       />
     </FullWidthFormComponentBox>
   );

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

@@ -15,18 +15,18 @@
  * limitations under the License.
  */
 
-import type { ChangeEvent } from 'react';
-import type { PropsWithIsTabledRequiredAttribute } from '../../../../interfaces/renderProps.interface';
 import Box from '@mui/material/Box';
-import Select from '@mui/material/Select';
-import MenuItem from '@mui/material/MenuItem';
-import MuiTextField from '../../TextItem/MuiTextField';
 import { grey } from '@mui/material/colors';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
 import Typography from '@mui/material/Typography';
-import { useRendererStylingStore } from '../../../../stores';
+import type { ChangeEvent } from 'react';
+import type { PropsWithIsTabledAttribute } from '../../../../interfaces/renderProps.interface';
+import { useRendererConfigStore } from '../../../../stores';
 import FormControl from '@mui/material/FormControl';
+import MuiTextField from '../../TextItem/MuiTextField';
 
-interface CustomTimeFieldProps extends PropsWithIsTabledRequiredAttribute {
+interface CustomTimeFieldProps extends PropsWithIsTabledAttribute {
   linkId: string;
   itemType: string;
   timeInput: string;
@@ -39,7 +39,6 @@ interface CustomTimeFieldProps extends PropsWithIsTabledRequiredAttribute {
   isPartOfDateTime: boolean;
   onTimeInputChange: (newInput: string) => void;
   onPeriodChange: (newPeriod: string) => void;
-  onTimeBlur: () => void;
 }
 
 function CustomTimeField(props: CustomTimeFieldProps) {
@@ -55,13 +54,12 @@ function CustomTimeField(props: CustomTimeFieldProps) {
     isPartOfDateTime,
     isTabled,
     onTimeInputChange,
-    onPeriodChange,
-    onTimeBlur
+    onPeriodChange
   } = props;
   // TODO this component doesn't have a calcExpUpdated update animation
 
-  const readOnlyVisualStyle = useRendererStylingStore.use.readOnlyVisualStyle();
-  const textFieldWidth = useRendererStylingStore.use.textFieldWidth();
+  const readOnlyVisualStyle = useRendererConfigStore.use.readOnlyVisualStyle();
+  const textFieldWidth = useRendererConfigStore.use.textFieldWidth();
 
   // If this reusable time field is part of a DateTime component, do not assign an id to the wrapping <Box/>
   // If this reusable time field is from a Time component, the wrapping <Box/> should have an id
@@ -86,7 +84,6 @@ function CustomTimeField(props: CustomTimeFieldProps) {
           fullWidth
           sx={{ flex: 1 }}
           onChange={(e: ChangeEvent<HTMLInputElement>) => onTimeInputChange(e.target.value)}
-          onBlur={onTimeBlur}
           label={displayPrompt}
           placeholder="--:--"
           disabled={readOnly && readOnlyVisualStyle === 'disabled'}
@@ -107,8 +104,7 @@ function CustomTimeField(props: CustomTimeFieldProps) {
             readOnly={(readOnly && readOnlyVisualStyle === 'readonly') || is24HourNotation}
             displayEmpty
             size="small"
-            onChange={(e) => onPeriodChange(e.target.value)}
-            onBlur={onTimeBlur}>
+            onChange={(e) => onPeriodChange(e.target.value)}>
             <MenuItem value="">
               <span style={{ color: grey['500'] }}>{is24HourNotation ? '-' : 'AM/PM'}</span>
             </MenuItem>

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

@@ -15,13 +15,13 @@
  * limitations under the License.
  */
 
+import Stack from '@mui/material/Stack';
 import type { Dispatch, SetStateAction } from 'react';
-import type { PropsWithIsTabledRequiredAttribute } from '../../../../interfaces/renderProps.interface';
+import type { PropsWithIsTabledAttribute } from '../../../../interfaces/renderProps.interface';
 import CustomDateField from '../CustomDateItem/CustomDateField';
 import CustomTimeField from './CustomTimeField';
-import Stack from '@mui/material/Stack';
 
-interface DateTimeFieldProps extends PropsWithIsTabledRequiredAttribute {
+interface DateTimeFieldProps extends PropsWithIsTabledAttribute {
   linkId: string;
   itemType: string;
   itemText: string | undefined;
@@ -38,12 +38,9 @@ interface DateTimeFieldProps extends PropsWithIsTabledRequiredAttribute {
   readOnly: boolean;
   calcExpUpdated: boolean;
   onDateInputChange: (newDateInput: string) => void;
-  onDateBlur: () => void;
   onSelectDate: (selectedDate: string) => void;
   setDateFocused: Dispatch<SetStateAction<boolean>>;
   onTimeInputChange: (newTimeInput: string, newPeriodInput: string) => void;
-  onTimeBlur: () => void;
-  showFeedback: boolean;
 }
 
 function DateTimeField(props: DateTimeFieldProps) {
@@ -65,12 +62,9 @@ function DateTimeField(props: DateTimeFieldProps) {
     calcExpUpdated,
     isTabled,
     onDateInputChange,
-    onDateBlur,
     onSelectDate,
     setDateFocused,
-    onTimeInputChange,
-    onTimeBlur,
-    showFeedback
+    onTimeInputChange
   } = props;
 
   return (
@@ -81,7 +75,7 @@ function DateTimeField(props: DateTimeFieldProps) {
         itemText={itemText}
         valueDate={displayDate}
         input={dateInput}
-        feedback={showFeedback ? (dateFeedback ?? '') : ''}
+        feedback={dateFeedback ?? ''}
         isFocused={dateFocused}
         displayPrompt={displayPrompt}
         entryFormat={entryFormat}
@@ -91,7 +85,6 @@ function DateTimeField(props: DateTimeFieldProps) {
         isTabled={isTabled}
         setFocused={setDateFocused}
         onInputChange={onDateInputChange}
-        onDateBlur={onDateBlur}
         onSelectDate={onSelectDate}
       />
       <CustomTimeField
@@ -100,7 +93,7 @@ function DateTimeField(props: DateTimeFieldProps) {
         timeInput={timeInput}
         periodInput={periodInput}
         is24HourNotation={is24HourNotation}
-        feedback={showFeedback ? (timeFeedback ?? '') : ''}
+        feedback={timeFeedback ?? ''}
         displayPrompt={displayPrompt}
         readOnly={readOnly}
         calcExpUpdated={calcExpUpdated}
@@ -108,7 +101,6 @@ function DateTimeField(props: DateTimeFieldProps) {
         isTabled={isTabled}
         onTimeInputChange={(newTimeInput) => onTimeInputChange(newTimeInput, periodInput)}
         onPeriodChange={(newPeriodInput) => onTimeInputChange(timeInput, newPeriodInput)}
-        onTimeBlur={onTimeBlur}
       />
     </Stack>
   );

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

@@ -16,17 +16,17 @@
  */
 
 import InputAdornment from '@mui/material/InputAdornment';
-import { StandardTextField } from '../Textfield.styles';
-import type { PropsWithIsTabledRequiredAttribute } from '../../../interfaces/renderProps.interface';
-import { useRendererStylingStore } from '../../../stores';
+import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
+import { useRendererConfigStore } from '../../../stores';
 import DisplayUnitText from '../ItemParts/DisplayUnitText';
 import { ClearButtonAdornment } from '../ItemParts/ClearButtonAdornment';
 import ExpressionUpdateFadingIcon from '../ItemParts/ExpressionUpdateFadingIcon';
 import ItemRepopulateButton from '../ItemParts/ItemRepopulateButton';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import type { RenderingExtensions } from '../../../hooks/useRenderingExtensions';
+import { StandardTextField } from '../Textfield.styles';
 
-interface DecimalFieldProps extends PropsWithIsTabledRequiredAttribute {
+interface DecimalFieldProps extends PropsWithIsTabledAttribute {
   qItem: QuestionnaireItem;
   input: string;
   feedback: string;
@@ -35,7 +35,6 @@ interface DecimalFieldProps extends PropsWithIsTabledRequiredAttribute {
   calcExpUpdated: boolean;
   onInputChange: (value: string) => void;
   onRepopulateSync: (newQrItem: QuestionnaireResponseItem | null) => unknown;
-  onBlur: () => void;
 }
 
 function DecimalField(props: DecimalFieldProps) {
@@ -48,14 +47,13 @@ function DecimalField(props: DecimalFieldProps) {
     calcExpUpdated,
     isTabled,
     onInputChange,
-    onRepopulateSync,
-    onBlur
+    onRepopulateSync
   } = props;
 
   const { displayPrompt, displayUnit, entryFormat, isRepopulatable } = renderingExtensions;
 
-  const readOnlyVisualStyle = useRendererStylingStore.use.readOnlyVisualStyle();
-  const textFieldWidth = useRendererStylingStore.use.textFieldWidth();
+  const readOnlyVisualStyle = useRendererConfigStore.use.readOnlyVisualStyle();
+  const textFieldWidth = useRendererConfigStore.use.textFieldWidth();
 
   let placeholderText = '0.0';
   if (displayPrompt) {
@@ -73,7 +71,6 @@ function DecimalField(props: DecimalFieldProps) {
       error={!!feedback}
       helperText={feedback}
       onChange={(event) => onInputChange(event.target.value)}
-      onBlur={onBlur}
       disabled={readOnly && readOnlyVisualStyle === 'disabled'}
       placeholder={placeholderText}
       fullWidth

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

@@ -15,38 +15,36 @@
  * limitations under the License.
  */
 
-import React, { useCallback, useState } from 'react';
-import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
-import { FullWidthFormComponentBox } from '../../Box.styles';
-import useValidationFeedback from '../../../hooks/useValidationFeedback';
 import debounce from 'lodash.debounce';
+import { useCallback, useState } from 'react';
+import useReadOnly from '../../../hooks/useReadOnly';
+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 ItemFieldGrid from '../ItemParts/ItemFieldGrid';
-import DecimalField from './DecimalField';
+import { getDecimalPrecision } from '../../../utils/extensions';
 import {
   parseDecimalStringToFloat,
   parseDecimalStringWithPrecision
 } from '../../../utils/parseInputs';
-import { getDecimalPrecision } from '../../../utils/extensions';
-import useDecimalCalculatedExpression from '../../../hooks/useDecimalCalculatedExpression';
-import useReadOnly from '../../../hooks/useReadOnly';
-import { useQuestionnaireStore } from '../../../stores';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import ItemLabel from '../ItemParts/ItemLabel';
-import useShowFeedback from '../../../hooks/useShowFeedback';
 import type { QuestionnaireResponseItem } from 'fhir/r4';
 import { readDecimalValue } from '../../../utils/readValues';
+import DecimalField from './DecimalField';
 
 function DecimalItem(props: BaseItemProps) {
   const {
     qItem,
     qrItem,
-    itemPath,
     isRepeated,
     isTabled,
     renderingExtensions,
     parentIsReadOnly,
     feedbackFromParent,
+    calcExpUpdated,
     onQrItemChange
   } = props;
 
@@ -65,53 +63,14 @@ function DecimalItem(props: BaseItemProps) {
   // Perform validation checks - there's no string-based input here
   const feedback = useValidationFeedback(qItem, feedbackFromParent);
 
-  // Provides a way to hide the feedback when the user is typing
-  const { showFeedback, setShowFeedback, hasBlurred, setHasBlurred } = useShowFeedback();
-
-  // Process calculated expressions
-  const { calcExpUpdated } = useDecimalCalculatedExpression({
-    qItem: qItem,
-    inputValue: input,
-    precision: precision,
-    onChangeByCalcExpressionDecimal: (newValueDecimal: number) => {
-      setInput(
-        typeof precision === 'number'
-          ? newValueDecimal.toFixed(precision)
-          : newValueDecimal.toString()
-      );
-      onQrItemChange(
-        {
-          ...createEmptyQrItem(qItem, answerKey),
-          answer: [{ id: answerKey, valueDecimal: newValueDecimal }]
-        },
-        itemPath
-      );
-    },
-    onChangeByCalcExpressionNull: () => {
-      setInput('');
-      onQrItemChange(createEmptyQrItem(qItem, answerKey), itemPath);
-    }
-  });
-
   // Event handlers
   function handleInputChange(newInput: string) {
     const parsedNewInput: string = parseDecimalStringWithPrecision(newInput, precision);
 
     setInput(parsedNewInput);
-
-    // Only suppress feedback once (before first blur)
-    if (!hasBlurred) {
-      setShowFeedback(false);
-    }
-
     updateQrItemWithDebounce(parsedNewInput);
   }
 
-  function handleBlur() {
-    setShowFeedback(true);
-    setHasBlurred(true); // From now on, feedback should stay visible
-  }
-
   function handleRepopulateSync(newQrItem: QuestionnaireResponseItem | null) {
     if (newQrItem && newQrItem?.answer) {
       const { valueDecimal: newValueDecimal, initialInput: newInput } = readDecimalValue(
@@ -120,19 +79,16 @@ function DecimalItem(props: BaseItemProps) {
       );
 
       setInput(newInput);
-      onQrItemChange(
-        {
-          ...createEmptyQrItem(qItem, answerKey),
-          answer: [{ id: answerKey, valueDecimal: newValueDecimal }]
-        },
-        itemPath
-      );
+      onQrItemChange({
+        ...createEmptyQrItem(qItem, answerKey),
+        answer: [{ id: answerKey, valueDecimal: newValueDecimal }]
+      });
       return;
     }
 
     // At this point newQrItem is null, so create an QRItem to replace it
     setInput('');
-    onQrItemChange(createEmptyQrItem(qItem, answerKey), itemPath);
+    onQrItemChange(createEmptyQrItem(qItem, answerKey));
   }
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -163,14 +119,13 @@ function DecimalItem(props: BaseItemProps) {
       <DecimalField
         qItem={qItem}
         input={input}
-        feedback={showFeedback ? feedback : ''}
+        feedback={feedback ?? ''}
         renderingExtensions={renderingExtensions}
         readOnly={readOnly}
         calcExpUpdated={calcExpUpdated}
         isTabled={isTabled}
         onInputChange={handleInputChange}
         onRepopulateSync={handleRepopulateSync}
-        onBlur={handleBlur}
       />
     );
   }
@@ -179,6 +134,7 @@ function DecimalItem(props: BaseItemProps) {
     <FullWidthFormComponentBox
       data-test="q-item-decimal-box"
       data-linkid={qItem.linkId}
+      data-label={qItem.text}
       onClick={() => onFocusLinkId(qItem.linkId)}>
       <ItemFieldGrid
         qItem={qItem}
@@ -188,17 +144,16 @@ function DecimalItem(props: BaseItemProps) {
           <DecimalField
             qItem={qItem}
             input={input}
-            feedback={showFeedback ? feedback : ''}
+            feedback={feedback ?? ''}
             renderingExtensions={renderingExtensions}
             readOnly={readOnly}
             calcExpUpdated={calcExpUpdated}
             isTabled={isTabled}
             onInputChange={handleInputChange}
             onRepopulateSync={handleRepopulateSync}
-            onBlur={handleBlur}
           />
         }
-        feedback={showFeedback ? feedback : undefined}
+        feedback={feedback ?? undefined}
       />
     </FullWidthFormComponentBox>
   );

package/src/components/FormComponents/DisplayItem/DisplayItem.tsx

@@ -63,6 +63,7 @@ const DisplayItem = memo(function DisplayItem(props: DisplayItemProps) {
     <FullWidthFormComponentBox
       data-test="q-item-display-box"
       data-linkid={qItem.linkId}
+      data-label={qItem.text}
       width="100%"
       onClick={() => onFocusLinkId(qItem.linkId)}>
       <ItemLabel