@aehrc/smart-forms-renderer 0.16.3 → 0.17.0

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

@@ -32,6 +32,7 @@ import { FullWidthFormComponentBox } from '../../Box.styles';
 import UrlField from './UrlField';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import useReadOnly from '../../../hooks/useReadOnly';
+import { useQuestionnaireStore } from '../../../stores';
 
 interface UrlItemProps
   extends PropsWithQrItemChangeHandler,
@@ -44,6 +45,8 @@ interface UrlItemProps
 function UrlItem(props: UrlItemProps) {
   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);
@@ -93,7 +96,10 @@ function UrlItem(props: UrlItemProps) {
     );
   }
   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}>
         <UrlField
           linkId={qItem.linkId}

package/src/stores/questionnaireStore.ts

@@ -58,6 +58,7 @@ interface QuestionnaireStoreType {
   processedValueSetUrls: Record<string, string>;
   cachedValueSetCodings: Record<string, Coding[]>;
   fhirPathContext: Record<string, any>;
+  focusedLinkId: string;
   readOnly: boolean;
   buildSourceQuestionnaire: (
     questionnaire: Questionnaire,
@@ -77,6 +78,7 @@ interface QuestionnaireStoreType {
     populatedResponse: QuestionnaireResponse,
     persistTabIndex?: boolean
   ) => QuestionnaireResponse;
+  onFocusLinkId: (linkId: string) => void;
 }
 
 export const questionnaireStore = createStore<QuestionnaireStoreType>()((set, get) => ({
@@ -96,6 +98,7 @@ export const questionnaireStore = createStore<QuestionnaireStoreType>()((set, ge
   processedValueSetUrls: {},
   cachedValueSetCodings: {},
   fhirPathContext: {},
+  focusedLinkId: '',
   readOnly: false,
   buildSourceQuestionnaire: async (
     questionnaire,
@@ -269,7 +272,11 @@ export const questionnaireStore = createStore<QuestionnaireStoreType>()((set, ge
     }));
 
     return updatedResponse;
-  }
+  },
+  onFocusLinkId: (linkId: string) =>
+    set(() => ({
+      focusedLinkId: linkId
+    }))
 }));
 
 export const useQuestionnaireStore = createSelectors(questionnaireStore);