@aehrc/smart-forms-renderer 0.16.2 → 0.17.0

package/src/components/FormComponents/BooleanItem/BooleanItem.tsx

@@ -29,6 +29,7 @@ import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import BooleanField from './BooleanField';
 import Box from '@mui/material/Box';
 import useReadOnly from '../../../hooks/useReadOnly';
+import { useQuestionnaireStore } from '../../../stores';
 
 interface BooleanItemProps
   extends PropsWithQrItemChangeHandler,
@@ -42,6 +43,8 @@ interface BooleanItemProps
 function BooleanItem(props: BooleanItemProps) {
   const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
+  const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
+
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
 
   // Init input value
@@ -72,7 +75,10 @@ function BooleanItem(props: BooleanItemProps) {
     );
   }
   return (
-    <FullWidthFormComponentBox data-test="q-item-boolean-box" data-linkid={qItem.linkId}>
+    <FullWidthFormComponentBox
+      data-test="q-item-boolean-box"
+      data-linkid={qItem.linkId}
+      onClick={() => onFocusLinkId(qItem.linkId)}>
       <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <BooleanField checked={checked} readOnly={readOnly} onCheckedChange={handleCheckedChange} />
       </ItemFieldGrid>

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

@@ -32,6 +32,7 @@ import { AUTOCOMPLETE_DEBOUNCE_DURATION } from '../../../utils/debounce';
 import useReadOnly from '../../../hooks/useReadOnly';
 import ChoiceAutocompleteField from './ChoiceAutocompleteField';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+import { useQuestionnaireStore } from '../../../stores';
 
 interface ChoiceAutocompleteItemProps
   extends PropsWithQrItemChangeHandler,
@@ -46,6 +47,8 @@ function ChoiceAutocompleteItem(props: ChoiceAutocompleteItemProps) {
   const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
   const qrChoice = qrItem ?? createEmptyQrItem(qItem);
 
+  const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
+
   // Init input value
   let valueCoding: Coding | undefined;
   if (qrChoice.answer) {
@@ -103,7 +106,8 @@ function ChoiceAutocompleteItem(props: ChoiceAutocompleteItemProps) {
   return (
     <FullWidthFormComponentBox
       data-test="q-item-choice-autocomplete-box"
-      data-linkid={qItem.linkId}>
+      data-linkid={qItem.linkId}
+      onClick={() => onFocusLinkId(qItem.linkId)}>
       <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <ChoiceAutocompleteField
           qItem={qItem}

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

@@ -32,6 +32,7 @@ import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import ChoiceCheckboxAnswerValueSetFields from './ChoiceCheckboxAnswerOptionFields';
 import useReadOnly from '../../../hooks/useReadOnly';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+import { useQuestionnaireStore } from '../../../stores';
 
 interface ChoiceCheckboxAnswerOptionItemProps
   extends PropsWithQrItemChangeHandler,
@@ -54,6 +55,8 @@ function ChoiceCheckboxAnswerOptionItem(props: ChoiceCheckboxAnswerOptionItemPro
     onQrItemChange
   } = props;
 
+  const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
+
   // Init input value
   const qrChoiceCheckbox = qrItem ?? createEmptyQrItem(qItem);
   const answers = qrChoiceCheckbox.answer ? qrChoiceCheckbox.answer : [];
@@ -97,7 +100,8 @@ function ChoiceCheckboxAnswerOptionItem(props: ChoiceCheckboxAnswerOptionItemPro
   return (
     <FullWidthFormComponentBox
       data-test="q-item-choice-checkbox-answer-option-box"
-      data-linkid={qItem.linkId}>
+      data-linkid={qItem.linkId}
+      onClick={() => onFocusLinkId(qItem.linkId)}>
       <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <ChoiceCheckboxAnswerValueSetFields
           qItem={qItem}

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

@@ -33,6 +33,7 @@ import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import ChoiceCheckboxAnswerValueSetFields from './ChoiceCheckboxAnswerValueSetFields';
 import useReadOnly from '../../../hooks/useReadOnly';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+import { useQuestionnaireStore } from '../../../stores';
 
 interface ChoiceCheckboxAnswerValueSetItemProps
   extends PropsWithQrItemChangeHandler,
@@ -56,6 +57,8 @@ function ChoiceCheckboxAnswerValueSetItem(props: ChoiceCheckboxAnswerValueSetIte
     onQrItemChange
   } = props;
 
+  const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
+
   // Init input value
   const qrChoiceCheckbox = qrItem ?? createEmptyQrItem(qItem);
   const answers = qrChoiceCheckbox.answer ? qrChoiceCheckbox.answer : [];
@@ -102,7 +105,8 @@ function ChoiceCheckboxAnswerValueSetItem(props: ChoiceCheckboxAnswerValueSetIte
   return (
     <FullWidthFormComponentBox
       data-test="q-item-choice-checkbox-answer-value-set-box"
-      data-linkid={qItem.linkId}>
+      data-linkid={qItem.linkId}
+      onClick={() => onFocusLinkId(qItem.linkId)}>
       <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <ChoiceCheckboxAnswerValueSetFields
           codings={codings}

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

@@ -29,6 +29,7 @@ import type {
 import ChoiceRadioAnswerOptionFields from './ChoiceRadioAnswerOptionFields';
 import useReadOnly from '../../../hooks/useReadOnly';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+import { useQuestionnaireStore } from '../../../stores';
 
 interface ChoiceRadioAnswerOptionItemProps
   extends PropsWithQrItemChangeHandler,
@@ -42,6 +43,8 @@ interface ChoiceRadioAnswerOptionItemProps
 function ChoiceRadioAnswerOptionItem(props: ChoiceRadioAnswerOptionItemProps) {
   const { qItem, qrItem, orientation, isRepeated, parentIsReadOnly, onQrItemChange } = props;
 
+  const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
+
   // Init input value
   const qrChoiceRadio = qrItem ?? createEmptyQrItem(qItem);
   const valueRadio = getQrChoiceValue(qrChoiceRadio);
@@ -73,7 +76,8 @@ function ChoiceRadioAnswerOptionItem(props: ChoiceRadioAnswerOptionItemProps) {
   return (
     <FullWidthFormComponentBox
       data-test="q-item-choice-radio-answer-option-box"
-      data-linkid={qItem.linkId}>
+      data-linkid={qItem.linkId}
+      onClick={() => onFocusLinkId(qItem.linkId)}>
       <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <ChoiceRadioAnswerOptionFields
           qItem={qItem}

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

@@ -30,6 +30,7 @@ import type {
 import ChoiceRadioAnswerValueSetFields from './ChoiceRadioAnswerValueSetFields';
 import useReadOnly from '../../../hooks/useReadOnly';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+import { useQuestionnaireStore } from '../../../stores';
 
 interface ChoiceRadioAnswerValueSetItemProps
   extends PropsWithQrItemChangeHandler,
@@ -43,6 +44,8 @@ interface ChoiceRadioAnswerValueSetItemProps
 function ChoiceRadioAnswerValueSetItem(props: ChoiceRadioAnswerValueSetItemProps) {
   const { qItem, qrItem, orientation, isRepeated, parentIsReadOnly, onQrItemChange } = props;
 
+  const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
+
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
 
   // Init input value
@@ -85,7 +88,8 @@ function ChoiceRadioAnswerValueSetItem(props: ChoiceRadioAnswerValueSetItemProps
   return (
     <FullWidthFormComponentBox
       data-test="q-item-choice-radio-answer-value-set-box"
-      data-linkid={qItem.linkId}>
+      data-linkid={qItem.linkId}
+      onClick={() => onFocusLinkId(qItem.linkId)}>
       <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <ChoiceRadioAnswerValueSetFields
           qItem={qItem}

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

@@ -30,6 +30,7 @@ import type {
 import ChoiceSelectAnswerOptionFields from './ChoiceSelectAnswerOptionFields';
 import useReadOnly from '../../../hooks/useReadOnly';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+import { useQuestionnaireStore } from '../../../stores';
 
 interface ChoiceSelectAnswerOptionItemProps
   extends PropsWithQrItemChangeHandler,
@@ -43,6 +44,8 @@ interface ChoiceSelectAnswerOptionItemProps
 function ChoiceSelectAnswerOptionItem(props: ChoiceSelectAnswerOptionItemProps) {
   const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
+  const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
+
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
 
   // Init input value
@@ -79,7 +82,8 @@ function ChoiceSelectAnswerOptionItem(props: ChoiceSelectAnswerOptionItemProps)
   return (
     <FullWidthFormComponentBox
       data-test="q-item-choice-select-answer-option-box"
-      data-linkid={qItem.linkId}>
+      data-linkid={qItem.linkId}
+      onClick={() => onFocusLinkId(qItem.linkId)}>
       <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <ChoiceSelectAnswerOptionFields
           qItem={qItem}

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

@@ -30,6 +30,7 @@ import type {
 import ChoiceSelectAnswerValueSetFields from './ChoiceSelectAnswerValueSetFields';
 import useReadOnly from '../../../hooks/useReadOnly';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+import { useQuestionnaireStore } from '../../../stores';
 
 interface ChoiceSelectAnswerValueSetItemProps
   extends PropsWithQrItemChangeHandler,
@@ -43,6 +44,8 @@ interface ChoiceSelectAnswerValueSetItemProps
 function ChoiceSelectAnswerValueSetItem(props: ChoiceSelectAnswerValueSetItemProps) {
   const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
+  const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
+
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
 
   // Init input value
@@ -105,7 +108,8 @@ function ChoiceSelectAnswerValueSetItem(props: ChoiceSelectAnswerValueSetItemPro
   return (
     <FullWidthFormComponentBox
       data-test="q-item-choice-dropdown-answer-value-set-box"
-      data-linkid={qItem.linkId}>
+      data-linkid={qItem.linkId}
+      onClick={() => onFocusLinkId(qItem.linkId)}>
       <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <ChoiceSelectAnswerValueSetFields
           qItem={qItem}

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

@@ -35,6 +35,7 @@ import {
 import { createEmptyQrItem } from '../../../utils/qrItem';
 import useDateValidation from '../../../hooks/useDateValidation';
 import CustomDateField from './customDateTimePicker/CustomDateField';
+import { useQuestionnaireStore } from '../../../stores';
 
 interface CustomDateItemProps
   extends PropsWithQrItemChangeHandler,
@@ -48,6 +49,8 @@ interface CustomDateItemProps
 function CustomDateItem(props: CustomDateItemProps) {
   const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
+  const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
+
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
   const { displayPrompt, entryFormat } = useRenderingExtensions(qItem);
 
@@ -116,7 +119,10 @@ function CustomDateItem(props: CustomDateItemProps) {
   }
 
   return (
-    <FullWidthFormComponentBox data-test="q-item-date-box" data-linkid={qItem.linkId}>
+    <FullWidthFormComponentBox
+      data-test="q-item-date-box"
+      data-linkid={qItem.linkId}
+      onClick={() => onFocusLinkId(qItem.linkId)}>
       <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <CustomDateField
           linkId={qItem.linkId}

package/src/components/FormComponents/DateTimeItem/DateTimeItem.tsx

@@ -31,6 +31,7 @@ import DateTimeField from './DateTimeField';
 import type { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
 import useReadOnly from '../../../hooks/useReadOnly';
+import { useQuestionnaireStore } from '../../../stores';
 
 interface DateTimeItemProps
   extends PropsWithQrItemChangeHandler,
@@ -44,6 +45,8 @@ interface DateTimeItemProps
 function DateTimeItem(props: DateTimeItemProps) {
   const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
+  const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
+
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
   const { displayPrompt, entryFormat } = useRenderingExtensions(qItem);
 
@@ -82,7 +85,10 @@ function DateTimeItem(props: DateTimeItemProps) {
   }
 
   return (
-    <FullWidthFormComponentBox data-test="q-item-date-time-box" data-linkid={qItem.linkId}>
+    <FullWidthFormComponentBox
+      data-test="q-item-date-time-box"
+      data-linkid={qItem.linkId}
+      onClick={() => onFocusLinkId(qItem.linkId)}>
       <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <DateTimeField
           value={dateTimeDayJs}

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

@@ -39,6 +39,7 @@ import { getDecimalPrecision } from '../../../utils/itemControl';
 import useDecimalCalculatedExpression from '../../../hooks/useDecimalCalculatedExpression';
 import useStringInput from '../../../hooks/useStringInput';
 import useReadOnly from '../../../hooks/useReadOnly';
+import { useQuestionnaireStore } from '../../../stores';
 
 interface DecimalItemProps
   extends PropsWithQrItemChangeHandler,
@@ -52,6 +53,8 @@ interface DecimalItemProps
 function DecimalItem(props: DecimalItemProps) {
   const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
+  const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
+
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
   const precision = getDecimalPrecision(qItem);
   const { displayUnit, displayPrompt, entryFormat, regexValidation, minLength, maxLength } =
@@ -126,7 +129,10 @@ function DecimalItem(props: DecimalItemProps) {
   }
 
   return (
-    <FullWidthFormComponentBox data-test="q-item-decimal-box" data-linkid={qItem.linkId}>
+    <FullWidthFormComponentBox
+      data-test="q-item-decimal-box"
+      data-linkid={qItem.linkId}
+      onClick={() => onFocusLinkId(qItem.linkId)}>
       <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <DecimalField
           linkId={qItem.linkId}

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

@@ -20,6 +20,7 @@ import type { QuestionnaireItem } from 'fhir/r4';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import { isSpecificItemControl } from '../../../utils';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+import { useQuestionnaireStore } from '../../../stores';
 
 interface DisplayItemProps {
   qItem: QuestionnaireItem;
@@ -28,13 +29,18 @@ interface DisplayItemProps {
 const DisplayItem = memo(function DisplayItem(props: DisplayItemProps) {
   const { qItem } = props;
 
+  const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
+
   const isContextDisplay = isSpecificItemControl(qItem, 'context-display');
   if (isContextDisplay) {
     return null;
   }
 
   return (
-    <FullWidthFormComponentBox data-test="q-item-display-box" data-linkid={qItem.linkId}>
+    <FullWidthFormComponentBox
+      data-test="q-item-display-box"
+      data-linkid={qItem.linkId}
+      onClick={() => onFocusLinkId(qItem.linkId)}>
       <LabelWrapper qItem={qItem} readOnly={false} />
     </FullWidthFormComponentBox>
   );

package/src/components/FormComponents/GridGroup/GridGroup.tsx

@@ -33,6 +33,7 @@ import { mapQItemsIndex } from '../../../utils/mapItem';
 import GridTable from './GridTable';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
 import useReadOnly from '../../../hooks/useReadOnly';
+import { useQuestionnaireStore } from '../../../stores';
 
 interface GridGroupProps
   extends PropsWithQrItemChangeHandler,
@@ -47,6 +48,8 @@ function GridGroup(props: GridGroupProps) {
   const { qItem, qrItem, groupCardElevation, showMinimalView, parentIsReadOnly, onQrItemChange } =
     props;
 
+  const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
+
   const qRowItems = qItem.item;
   const qrGroup = qrItem && qrItem.item ? qrItem : createEmptyQrGroup(qItem);
   const qrRowItems = qrGroup.item;
@@ -103,7 +106,8 @@ function GridGroup(props: GridGroupProps) {
       cardElevation={groupCardElevation}
       isRepeated={false}
       py={3}
-      data-linkid={qItem.linkId}>
+      data-linkid={qItem.linkId}
+      onClick={() => onFocusLinkId(qItem.linkId)}>
       {qItem.text ? (
         <>
           <Typography

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

@@ -35,6 +35,7 @@ import { parseValidInteger } from '../../../utils/parseInputs';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import useNumberInput from '../../../hooks/useNumberInput';
 import useReadOnly from '../../../hooks/useReadOnly';
+import { useQuestionnaireStore } from '../../../stores';
 
 interface IntegerItemProps
   extends PropsWithQrItemChangeHandler,
@@ -48,6 +49,8 @@ interface IntegerItemProps
 function IntegerItem(props: IntegerItemProps) {
   const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
+  const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
+
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
   const { displayUnit, displayPrompt, entryFormat, regexValidation, minLength, maxLength } =
     useRenderingExtensions(qItem);
@@ -114,7 +117,10 @@ function IntegerItem(props: IntegerItemProps) {
   }
 
   return (
-    <FullWidthFormComponentBox data-test="q-item-integer-box" data-linkid={qItem.linkId}>
+    <FullWidthFormComponentBox
+      data-test="q-item-integer-box"
+      data-linkid={qItem.linkId}
+      onClick={() => onFocusLinkId(qItem.linkId)}>
       <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <IntegerField
           linkId={qItem.linkId}

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

@@ -33,6 +33,7 @@ import { AUTOCOMPLETE_DEBOUNCE_DURATION } from '../../../utils/debounce';
 import OpenChoiceAutocompleteField from './OpenChoiceAutocompleteField';
 import useReadOnly from '../../../hooks/useReadOnly';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+import { useQuestionnaireStore } from '../../../stores';
 
 interface OpenChoiceAutocompleteItemProps
   extends PropsWithQrItemChangeHandler,
@@ -46,6 +47,8 @@ interface OpenChoiceAutocompleteItemProps
 function OpenChoiceAutocompleteItem(props: OpenChoiceAutocompleteItemProps) {
   const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
+  const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
+
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
 
   const qrOpenChoice = qrItem ?? createEmptyQrItem(qItem);
@@ -132,7 +135,8 @@ function OpenChoiceAutocompleteItem(props: OpenChoiceAutocompleteItemProps) {
   return (
     <FullWidthFormComponentBox
       data-test="q-item-open-choice-autocomplete-box"
-      data-linkid={qItem.linkId}>
+      data-linkid={qItem.linkId}
+      onClick={() => onFocusLinkId(qItem.linkId)}>
       <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <OpenChoiceAutocompleteField
           qItem={qItem}

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

@@ -39,6 +39,7 @@ import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import OpenChoiceCheckboxAnswerOptionFields from './OpenChoiceCheckboxAnswerOptionFields';
 import useReadOnly from '../../../hooks/useReadOnly';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+import { useQuestionnaireStore } from '../../../stores';
 
 interface OpenChoiceCheckboxAnswerOptionItemProps
   extends PropsWithQrItemChangeHandler,
@@ -61,6 +62,8 @@ function OpenChoiceCheckboxAnswerOptionItem(props: OpenChoiceCheckboxAnswerOptio
     onQrItemChange
   } = props;
 
+  const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
+
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
   const openLabelText = getOpenLabelText(qItem);
   const { displayInstructions } = useRenderingExtensions(qItem);
@@ -159,7 +162,8 @@ function OpenChoiceCheckboxAnswerOptionItem(props: OpenChoiceCheckboxAnswerOptio
   return (
     <FullWidthFormComponentBox
       data-test="q-item-open-choice-checkbox-answer-option-box"
-      data-linkid={qItem.linkId}>
+      data-linkid={qItem.linkId}
+      onClick={() => onFocusLinkId(qItem.linkId)}>
       <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <OpenChoiceCheckboxAnswerOptionFields
           qItem={qItem}

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

@@ -31,6 +31,7 @@ import type {
 import OpenChoiceRadioAnswerOptionFields from './OpenChoiceRadioAnswerOptionFields';
 import useReadOnly from '../../../hooks/useReadOnly';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+import { useQuestionnaireStore } from '../../../stores';
 
 interface OpenChoiceRadioAnswerOptionItemProps
   extends PropsWithQrItemChangeHandler,
@@ -44,6 +45,8 @@ interface OpenChoiceRadioAnswerOptionItemProps
 function OpenChoiceRadioAnswerOptionItem(props: OpenChoiceRadioAnswerOptionItemProps) {
   const { qItem, qrItem, orientation, parentIsReadOnly, onQrItemChange } = props;
 
+  const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
+
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
   const openLabelText = getOpenLabelText(qItem);
 
@@ -118,7 +121,8 @@ function OpenChoiceRadioAnswerOptionItem(props: OpenChoiceRadioAnswerOptionItemP
   return (
     <FullWidthFormComponentBox
       data-test="q-item-open-choice-radio-answer-option-box"
-      data-linkid={qItem.linkId}>
+      data-linkid={qItem.linkId}
+      onClick={() => onFocusLinkId(qItem.linkId)}>
       <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <OpenChoiceRadioAnswerOptionFields
           qItem={qItem}

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

@@ -32,6 +32,7 @@ import type {
 import OpenChoiceSelectAnswerOptionField from './OpenChoiceSelectAnswerOptionField';
 import useReadOnly from '../../../hooks/useReadOnly';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+import { useQuestionnaireStore } from '../../../stores';
 
 interface OpenChoiceSelectAnswerOptionItemProps
   extends PropsWithQrItemChangeHandler,
@@ -45,6 +46,8 @@ interface OpenChoiceSelectAnswerOptionItemProps
 function OpenChoiceSelectAnswerOptionItem(props: OpenChoiceSelectAnswerOptionItemProps) {
   const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
+  const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
+
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
 
   // Init input value
@@ -106,7 +109,8 @@ function OpenChoiceSelectAnswerOptionItem(props: OpenChoiceSelectAnswerOptionIte
   return (
     <FullWidthFormComponentBox
       data-test="q-item-open-choice-select-answer-option-box"
-      data-linkid={qItem.linkId}>
+      data-linkid={qItem.linkId}
+      onClick={() => onFocusLinkId(qItem.linkId)}>
       <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <OpenChoiceSelectAnswerOptionField
           qItem={qItem}

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

@@ -29,6 +29,7 @@ import type {
 import OpenChoiceSelectAnswerValueSetField from './OpenChoiceSelectAnswerValueSetField';
 import useReadOnly from '../../../hooks/useReadOnly';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+import { useQuestionnaireStore } from '../../../stores';
 
 interface OpenChoiceSelectAnswerValueSetItemProps
   extends PropsWithQrItemChangeHandler,
@@ -42,6 +43,8 @@ interface OpenChoiceSelectAnswerValueSetItemProps
 function OpenChoiceSelectAnswerValueSetItem(props: OpenChoiceSelectAnswerValueSetItemProps) {
   const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
+  const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
+
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
 
   // Init input value
@@ -90,7 +93,8 @@ function OpenChoiceSelectAnswerValueSetItem(props: OpenChoiceSelectAnswerValueSe
   return (
     <FullWidthFormComponentBox
       data-test="q-item-open-choice-select-answer-value-set-box"
-      data-linkid={qItem.linkId}>
+      data-linkid={qItem.linkId}
+      onClick={() => onFocusLinkId(qItem.linkId)}>
       <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <OpenChoiceSelectAnswerValueSetField
           qItem={qItem}

package/src/components/FormComponents/RepeatItem/RepeatItem.tsx

@@ -32,6 +32,7 @@ import Collapse from '@mui/material/Collapse';
 import useInitialiseRepeatAnswers from '../../../hooks/useInitialiseRepeatAnswers';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import useReadOnly from '../../../hooks/useReadOnly';
+import { useQuestionnaireStore } from '../../../stores';
 
 interface RepeatItemProps
   extends PropsWithQrItemChangeHandler,
@@ -46,6 +47,8 @@ function RepeatItem(props: RepeatItemProps) {
   const { qItem, qrItem, groupCardElevation, showMinimalView, parentIsReadOnly, onQrItemChange } =
     props;
 
+  const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
+
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
 
   const initialRepeatAnswers = useInitialiseRepeatAnswers(qItem, qrItem);
@@ -119,7 +122,10 @@ function RepeatItem(props: RepeatItemProps) {
   }
 
   return (
-    <FullWidthFormComponentBox data-test="q-item-repeat-box" data-linkid={qItem.linkId}>
+    <FullWidthFormComponentBox
+      data-test="q-item-repeat-box"
+      data-linkid={qItem.linkId}
+      onClick={() => onFocusLinkId(qItem.linkId)}>
       <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <TransitionGroup>
           {repeatAnswers.map(({ nanoId, answer }, index) => {

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

@@ -30,6 +30,7 @@ import useReadOnly from '../../../hooks/useReadOnly';
 import SliderField from './SliderField';
 import useSliderExtensions from '../../../hooks/useSliderExtensions';
 import Box from '@mui/material/Box';
+import { useQuestionnaireStore } from '../../../stores';
 
 interface SliderItemProps
   extends PropsWithQrItemChangeHandler,
@@ -43,6 +44,8 @@ interface SliderItemProps
 function SliderItem(props: SliderItemProps) {
   const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
+  const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
+
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
   const { minValue, maxValue, stepValue, minLabel, maxLabel } = useSliderExtensions(qItem);
 
@@ -88,7 +91,10 @@ function SliderItem(props: SliderItemProps) {
   }
 
   return (
-    <FullWidthFormComponentBox data-test="q-item-slider-box" data-linkid={qItem.linkId}>
+    <FullWidthFormComponentBox
+      data-test="q-item-slider-box"
+      data-linkid={qItem.linkId}
+      onClick={() => onFocusLinkId(qItem.linkId)}>
       <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <Box px={4}>
           <SliderField

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

@@ -34,6 +34,7 @@ import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import useStringCalculatedExpression from '../../../hooks/useStringCalculatedExpression';
 import useStringInput from '../../../hooks/useStringInput';
 import useReadOnly from '../../../hooks/useReadOnly';
+import { useQuestionnaireStore } from '../../../stores';
 
 interface StringItemProps
   extends PropsWithQrItemChangeHandler,
@@ -46,6 +47,8 @@ interface StringItemProps
 function StringItem(props: StringItemProps) {
   const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
+  const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
+
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
   const { displayUnit, displayPrompt, entryFormat, regexValidation, minLength, maxLength } =
     useRenderingExtensions(qItem);
@@ -106,7 +109,10 @@ function StringItem(props: StringItemProps) {
     );
   }
   return (
-    <FullWidthFormComponentBox data-test="q-item-string-box" data-linkid={qItem.linkId}>
+    <FullWidthFormComponentBox
+      data-test="q-item-string-box"
+      data-linkid={qItem.linkId}
+      onClick={() => onFocusLinkId(qItem.linkId)}>
       <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <StringField
           linkId={qItem.linkId}

package/src/components/FormComponents/Tables/GroupTableView.tsx

@@ -37,6 +37,7 @@ import type {
 import type { GroupTableRowModel } from '../../../interfaces/groupTable.interface';
 import GroupTableBody from './GroupTableBody';
 import Checkbox from '@mui/material/Checkbox';
+import { useQuestionnaireStore } from '../../../stores';
 
 interface GroupTableViewProps
   extends PropsWithShowMinimalViewAttribute,
@@ -75,6 +76,8 @@ function GroupTableView(props: GroupTableViewProps) {
     onReorderRows
   } = props;
 
+  const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
+
   if (showMinimalView) {
     return (
       <QGroupContainerBox cardElevation={groupCardElevation} isRepeated={false} py={1}>
@@ -116,7 +119,8 @@ function GroupTableView(props: GroupTableViewProps) {
       cardElevation={groupCardElevation}
       isRepeated={false}
       py={3}
-      data-linkid={qItem.linkId}>
+      data-linkid={qItem.linkId}
+      onClick={() => onFocusLinkId(qItem.linkId)}>
       {groupCardElevation !== 1 ? (
         <>
           <Typography