@tellescope/react-components 1.248.0 → 1.249.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.248.0",
+  "version": "1.249.1",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -51,13 +51,13 @@
     "@reduxjs/toolkit": "1.9.0",
     "@stripe/react-stripe-js": "2.9.0",
     "@stripe/stripe-js": "1.52.1",
-    "@tellescope/constants": "1.248.0",
-    "@tellescope/sdk": "1.248.0",
-    "@tellescope/types-client": "1.248.0",
-    "@tellescope/types-models": "1.248.0",
-    "@tellescope/types-utilities": "1.248.0",
-    "@tellescope/utilities": "1.248.0",
-    "@tellescope/validation": "1.248.0",
+    "@tellescope/constants": "1.249.1",
+    "@tellescope/sdk": "1.249.1",
+    "@tellescope/types-client": "1.249.1",
+    "@tellescope/types-models": "1.249.1",
+    "@tellescope/types-utilities": "1.249.1",
+    "@tellescope/utilities": "1.249.1",
+    "@tellescope/validation": "1.249.1",
     "css-to-react-native": "3.0.0",
     "draft-js": "0.11.7",
     "draftjs-to-html": "0.9.1",
@@ -84,7 +84,7 @@
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-native": "^0.65.0 || ^0.66.0 || ^0.67.0 || ^0.68.0 || ^0.71.0"
   },
-  "gitHead": "c10ecca2464920b76cda6af60fafbd1c9fde5174",
+  "gitHead": "23480776738c31e1d56244ce6c23d9abe032e15a",
   "publishConfig": {
     "access": "public"
   }

package/src/Forms/forms.tsx

@@ -145,6 +145,7 @@ export const QuestionForField = ({
   uploadingFiles, setUploadingFiles, handleFileUpload,
   groupFields,
   AddToDatabase,
+  lastNavigationDirectionRef,
 } : {
   spacing?: number,
   form?: Form,
@@ -163,19 +164,19 @@ export const QuestionForField = ({
   setUploadingFiles: React.Dispatch<React.SetStateAction<{ fieldId: string }[]>>,
   groupFields?: FormField[],
   AddToDatabase?: React.JSXElementConstructor<AddToDatabaseProps>,
-} & Pick<TellescopeFormProps, "rootResponseId" | "goToNextField" | "groupId" | "groupInstance" | "submit" | "formResponseId" | 'enduserId' | 'isPreviousDisabled' | 'goToPreviousField' | 'enduser' | 'handleDatabaseSelect' | 'onAddFile' | 'onFieldChange' | 'fields' | 'customInputs' | 'responses' | 'selectedFiles' | 'validateField'>) => {
+} & Pick<TellescopeFormProps, "rootResponseId" | "goToNextField" | "groupId" | "groupInstance" | "submit" | "formResponseId" | 'enduserId' | 'isPreviousDisabled' | 'goToPreviousField' | 'enduser' | 'handleDatabaseSelect' | 'onAddFile' | 'onFieldChange' | 'fields' | 'customInputs' | 'responses' | 'selectedFiles' | 'validateField' | 'lastNavigationDirectionRef'>) => {
   const String = customInputs?.['string'] ?? StringInput
   const StringLong = customInputs?.['stringLong'] ?? StringLongInput
   const Email = customInputs?.['email'] ?? EmailInput
   const Number = customInputs?.['number'] ?? NumberInput
-  const Phone = customInputs?.['phone'] ?? PhoneInput 
-  const ResolvedDateInput = customInputs?.['date'] ?? DateInput 
-  const Signature = customInputs?.['signature'] ?? SignatureInput 
-  const MultipleChoice = customInputs?.['multiple_choice'] ?? MultipleChoiceInput 
-  const Stripe = customInputs?.['Stripe'] ?? StripeInput 
-  const Chargebee = customInputs?.['Chargebee'] ?? ChargeebeeInput 
-  const File = customInputs?.['file'] ?? FileInput 
-  const Files = customInputs?.['files'] ?? FilesInput 
+  const Phone = customInputs?.['phone'] ?? PhoneInput
+  const ResolvedDateInput = customInputs?.['date'] ?? DateInput
+  const Signature = customInputs?.['signature'] ?? SignatureInput
+  const MultipleChoice = customInputs?.['multiple_choice'] ?? MultipleChoiceInput
+  const Stripe = customInputs?.['Stripe'] ?? StripeInput
+  const Chargebee = customInputs?.['Chargebee'] ?? ChargeebeeInput
+  const File = customInputs?.['file'] ?? FileInput
+  const Files = customInputs?.['files'] ?? FilesInput
   const Ranking = customInputs?.['ranking'] ?? RankingInput
   const Rating = customInputs?.['rating'] ?? RatingInput
   const Address = customInputs?.['Address'] ?? AddressInput
@@ -293,7 +294,7 @@ export const QuestionForField = ({
           <DateStringInput field={field} disabled={value.disabled} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<'string'>} form={form} />
         )
         : field.type === 'Hidden Value' ? (
-          <HiddenValue groupFields={groupFields} isSinglePage={isSinglePage} goToNextField={goToNextField} goToPreviousField={goToPreviousField} field={field} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<any>} form={form} />
+          <HiddenValue groupFields={groupFields} isSinglePage={isSinglePage} goToNextField={goToNextField} goToPreviousField={goToPreviousField} field={field} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<any>} form={form} lastNavigationDirectionRef={lastNavigationDirectionRef} />
         )
         : field.type === 'Address' ? (
           <Address field={field} disabled={value.disabled} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<any>} form={form} />
@@ -428,13 +429,13 @@ export const QuestionForField = ({
                   enduser={enduser} goToPreviousField={goToPreviousField} isPreviousDisabled={isPreviousDisabled} goToNextField={goToNextField}
                   form={form} formResponseId={formResponseId} rootResponseId={rootResponseId} submit={submit}
                   repeats={repeats} onRepeatsChange={onRepeatsChange} setCustomerId={setCustomerId}
-                  value={value} file={file} 
+                  value={value} file={file}
                   onAddFile={onAddFile} onFieldChange={onFieldChange}
                   responses={responses} selectedFiles={selectedFiles}
                   validateField={validateField} enduserId={enduserId}
                   spacing={field.options?.groupPadding}
                   logicOptions={logicOptions}
-                  isInQuestionGroup 
+                  isInQuestionGroup
                   groupFields={
                     fields.filter(f => field.options?.subFields?.find(s => s.id === f.id))
                   }
@@ -442,6 +443,7 @@ export const QuestionForField = ({
                   uploadingFiles={uploadingFiles} setUploadingFiles={setUploadingFiles}
                   handleFileUpload={handleFileUpload}
                   AddToDatabase={AddToDatabase}
+                  lastNavigationDirectionRef={lastNavigationDirectionRef}
                 />
               </Flex>
             )
@@ -529,6 +531,7 @@ export const TellescopeSingleQuestionFlow: typeof TellescopeForm = ({
   groupInstance,
   logicOptions,
   uploadingFiles, setUploadingFiles, handleFileUpload,
+  lastNavigationDirectionRef,
 }) => {
   const beforeunloadHandler = React.useCallback((e: BeforeUnloadEvent) => {
     try {
@@ -652,6 +655,7 @@ export const TellescopeSingleQuestionFlow: typeof TellescopeForm = ({
                 logicOptions={logicOptions}
                 uploadingFiles={uploadingFiles} setUploadingFiles={setUploadingFiles}
                 handleFileUpload={handleFileUpload}
+                lastNavigationDirectionRef={lastNavigationDirectionRef}
               />
             </Flex>
         </Flex>
@@ -1295,7 +1299,8 @@ export const TellescopeSinglePageForm: React.JSXElementConstructor<TellescopeFor
   groupInstance,
   uploadingFiles, setUploadingFiles, handleFileUpload,
   AddToDatabase,
-  ...props 
+  lastNavigationDirectionRef,
+  ...props
 }) => {
   const list = useListForFormFields(fields, responses, { form: props.form, gender: enduser?.gender })
 
@@ -1424,7 +1429,7 @@ export const TellescopeSinglePageForm: React.JSXElementConstructor<TellescopeFor
                   enduserId={props.enduserId} formResponseId={props.formResponseId} rootResponseId={rootResponseId} submit={submit}
                   enduser={enduser} goToPreviousField={goToPreviousField} isPreviousDisabled={isPreviousDisabled} goToNextField={goToNextField}
                   repeats={repeats} onRepeatsChange={setRepeats} setCustomerId={setCustomerId}
-                  value={value} file={file} 
+                  value={value} file={file}
                   customInputs={customInputs}
                   onAddFile={onAddFile} onFieldChange={onFieldChange}
                   responses={responses} selectedFiles={selectedFiles}
@@ -1433,6 +1438,7 @@ export const TellescopeSinglePageForm: React.JSXElementConstructor<TellescopeFor
                   uploadingFiles={uploadingFiles} setUploadingFiles={setUploadingFiles}
                   handleFileUpload={handleFileUpload}
                   AddToDatabase={AddToDatabase}
+                  lastNavigationDirectionRef={lastNavigationDirectionRef}
                 />
               </Flex>
             </Flex>

package/src/Forms/forms.v2.tsx

@@ -154,6 +154,7 @@ export const QuestionForField = ({
   uploadingFiles, setUploadingFiles, handleFileUpload,
   groupFields,
   AddToDatabase,
+  lastNavigationDirectionRef,
 } : {
   spacing?: number,
   form?: Form,
@@ -172,7 +173,7 @@ export const QuestionForField = ({
   setUploadingFiles: React.Dispatch<React.SetStateAction<{ fieldId: string }[]>>,
   groupFields?: FormField[],
   AddToDatabase?: React.JSXElementConstructor<AddToDatabaseProps>,
-} & Pick<TellescopeFormProps, "rootResponseId" | "goToNextField" | "groupId" | "groupInstance" | "submit" | "formResponseId" | 'enduserId' | 'isPreviousDisabled' | 'goToPreviousField' | 'enduser' | 'handleDatabaseSelect' | 'onAddFile' | 'onFieldChange' | 'fields' | 'customInputs' | 'responses' | 'selectedFiles' | 'validateField'>) => {
+} & Pick<TellescopeFormProps, "rootResponseId" | "goToNextField" | "groupId" | "groupInstance" | "submit" | "formResponseId" | 'enduserId' | 'isPreviousDisabled' | 'goToPreviousField' | 'enduser' | 'handleDatabaseSelect' | 'onAddFile' | 'onFieldChange' | 'fields' | 'customInputs' | 'responses' | 'selectedFiles' | 'validateField' | 'lastNavigationDirectionRef'>) => {
   const String = customInputs?.['string'] ?? StringInput
   const StringLong = customInputs?.['stringLong'] ?? StringLongInput
   const Email = customInputs?.['email'] ?? EmailInput
@@ -303,7 +304,7 @@ export const QuestionForField = ({
           <DateStringInput field={field} disabled={value.disabled} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<'string'>} form={form} />
         )
         : field.type === 'Hidden Value' ? (
-          <HiddenValue groupFields={groupFields} isSinglePage={isSinglePage} goToNextField={goToNextField} goToPreviousField={goToPreviousField} field={field} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<any>} form={form} />
+          <HiddenValue groupFields={groupFields} isSinglePage={isSinglePage} goToNextField={goToNextField} goToPreviousField={goToPreviousField} field={field} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<any>} form={form} lastNavigationDirectionRef={lastNavigationDirectionRef} />
         )
         : field.type === 'Address' ? (
           <Address field={field} disabled={value.disabled} value={value.answer.value as any} onChange={onFieldChange as ChangeHandler<any>} form={form} />
@@ -438,13 +439,13 @@ export const QuestionForField = ({
                   enduser={enduser} goToPreviousField={goToPreviousField} isPreviousDisabled={isPreviousDisabled} goToNextField={goToNextField}
                   form={form} formResponseId={formResponseId} rootResponseId={rootResponseId} submit={submit}
                   repeats={repeats} onRepeatsChange={onRepeatsChange} setCustomerId={setCustomerId}
-                  value={value} file={file} 
+                  value={value} file={file}
                   onAddFile={onAddFile} onFieldChange={onFieldChange}
                   responses={responses} selectedFiles={selectedFiles}
                   validateField={validateField} enduserId={enduserId}
                   spacing={field.options?.groupPadding}
                   logicOptions={logicOptions}
-                  isInQuestionGroup 
+                  isInQuestionGroup
                   groupFields={
                     fields.filter(f => field.options?.subFields?.find(s => s.id === f.id))
                   }
@@ -452,6 +453,7 @@ export const QuestionForField = ({
                   uploadingFiles={uploadingFiles} setUploadingFiles={setUploadingFiles}
                   handleFileUpload={handleFileUpload}
                   AddToDatabase={AddToDatabase}
+                  lastNavigationDirectionRef={lastNavigationDirectionRef}
                 />
               </Flex>
             )
@@ -539,6 +541,7 @@ export const TellescopeSingleQuestionFlowV2: typeof TellescopeFormV2 = ({
   groupInstance,
   logicOptions,
   uploadingFiles, setUploadingFiles, handleFileUpload,
+  lastNavigationDirectionRef,
 }) => {
   const beforeunloadHandler = React.useCallback((e: BeforeUnloadEvent) => {
     try {
@@ -689,6 +692,7 @@ export const TellescopeSingleQuestionFlowV2: typeof TellescopeFormV2 = ({
                   logicOptions={logicOptions}
                   uploadingFiles={uploadingFiles} setUploadingFiles={setUploadingFiles}
                   handleFileUpload={handleFileUpload}
+                  lastNavigationDirectionRef={lastNavigationDirectionRef}
                 />
               </Flex>
             </Flex>
@@ -1137,7 +1141,8 @@ export const TellescopeSinglePageForm: React.JSXElementConstructor<TellescopeFor
   groupInstance,
   uploadingFiles, setUploadingFiles, handleFileUpload,
   AddToDatabase,
-  ...props 
+  lastNavigationDirectionRef,
+  ...props
 }) => {
   const list = useListForFormFields(fields, responses, { form: props.form, gender: enduser?.gender })
 
@@ -1266,7 +1271,7 @@ export const TellescopeSinglePageForm: React.JSXElementConstructor<TellescopeFor
                   enduserId={props.enduserId} formResponseId={props.formResponseId} rootResponseId={rootResponseId} submit={submit}
                   enduser={enduser} goToPreviousField={goToPreviousField} isPreviousDisabled={isPreviousDisabled} goToNextField={goToNextField}
                   repeats={repeats} onRepeatsChange={setRepeats} setCustomerId={setCustomerId}
-                  value={value} file={file} 
+                  value={value} file={file}
                   customInputs={customInputs}
                   onAddFile={onAddFile} onFieldChange={onFieldChange}
                   responses={responses} selectedFiles={selectedFiles}
@@ -1275,6 +1280,7 @@ export const TellescopeSinglePageForm: React.JSXElementConstructor<TellescopeFor
                   uploadingFiles={uploadingFiles} setUploadingFiles={setUploadingFiles}
                   handleFileUpload={handleFileUpload}
                   AddToDatabase={AddToDatabase}
+                  lastNavigationDirectionRef={lastNavigationDirectionRef}
                 />
               </Flex>
             </Flex>

package/src/Forms/hooks.tsx

@@ -501,6 +501,41 @@ const existing_response_if_compatible = (existingResponses: FormResponseValue[]
   return undefined // no valid match, write off as data loss due to incompatible type of new question
 }
 
+// Filter stale multiple-choice/dropdown selections whose options are now hidden by showCondition
+const filter_stale_choices = (
+  value: string[] | undefined,
+  field: FormField,
+  responseContext: FormResponseValue[],
+  enduser?: Partial<Enduser>,
+  form?: Form,
+): string[] | undefined => {
+  if (!value || !Array.isArray(value)) return value
+  if (field.type !== 'multiple_choice' && field.type !== 'Dropdown') return value
+
+  const options = field.options as { choices?: string[], optionDetails?: FormFieldOptionDetails[] } | undefined
+  if (!options?.optionDetails?.length) return value // no option-level conditions to check
+
+  const choices = options.choices ?? []
+
+  return value.filter(v => {
+    // preserve values not in the choices array (e.g. "other" free-text)
+    if (!choices.includes(v)) return true
+
+    const optionDetail = options.optionDetails?.find(d => d.option === v)
+    if (!optionDetail?.showCondition || object_is_empty(optionDetail.showCondition)) {
+      return true // no condition means always visible
+    }
+
+    return responses_satisfy_conditions(responseContext, optionDetail.showCondition, {
+      dateOfBirth: enduser?.dateOfBirth,
+      gender: enduser?.gender,
+      state: enduser?.state,
+      form,
+      activeResponses: responseContext,
+    })
+  })
+}
+
 const shouldCallout = (field: FormField | undefined, value: FormResponseValueAnswer['value']) => {
   if (!field) return false
   if (!value) return false 
@@ -546,6 +581,7 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
   const [currentPageIndex, setCurrentPageIndex] = useState(0)
   const [uploadingFiles, setUploadingFiles] = useState<{ fieldId: string }[]>([])
   const prevFieldStackRef = useRef<typeof root[]>([])
+  const lastNavigationDirectionRef = useRef<'forward' | 'backward' | null>(null)
 
   // Auto-advance state for form continuation
   const [isAutoAdvancing, setIsAutoAdvancing] = useState(false)
@@ -654,14 +690,22 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
   // placeholders for initial fields, reset when fields prop changes, since questions are now different (e.g. different form selected) 
   const fieldInitRef = useRef('')
   const initializeFields = useCallback(() => (
-    fields.map(f => ({
+    fields.map(f => {
+      const existingValue = existing_response_if_compatible(existingResponses, f)
+      const filteredValue = (
+        existingValue != null && Array.isArray(existingValue) && (f.type === 'multiple_choice' || f.type === 'Dropdown')
+          ? filter_stale_choices(existingValue as string[], f, existingResponses ?? [], enduser, form)
+          : existingValue
+      )
+
+      return {
       fieldId: f.id,
       fieldTitle: f.title,
       fieldDescription: f.description,
       fieldHtmlDescription: f.htmlDescription,
       externalId: f.externalId,
       intakeField: f.intakeField || undefined,
-      touched: false, 
+      touched: false,
       includeInSubmit: false,
       sharedWithEnduser: f.sharedWithEnduser,
       isCalledOut: existingResponses?.find(r => r.fieldId === f.id)?.isCalledOut,
@@ -681,11 +725,11 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
       : f?.intakeField === 'Address' && existingResponses?.find(r => r.fieldId === f.id && r.answer.type === 'Address')
           ? 'State'
           : undefined
-      ) as any,  
-      answer: { 
+      ) as any,
+      answer: {
         type: f.type,
         value: (
-          existing_response_if_compatible(existingResponses, f) ?? (
+          filteredValue ?? (
             (f.type === 'Insurance' || f.type === 'Address' || f.type === 'file' || f.type === 'signature' || f.type === 'multiple_choice' || f.type === 'Dropdown' || f.type === 'Table Input' || f.type === 'Database Select' || f.type === 'Medications' || f.type === 'Pharmacy Search')
               ? undefined  
                 : f.type === 'Question Group'
@@ -711,8 +755,8 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
         ),
       } as FormResponseValueAnswer,
       field: f,
-    }))
-  ), [fields, existingResponses])
+    }})
+  ), [fields, existingResponses, enduser, form])
 
   const [responses, setResponses] = useState<(Response)[]>(initializeFields())
   useEffect(() => {
@@ -734,12 +778,12 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
         ...response,
         fieldTitle: replace_form_field_template_values(originalField.title || '', { enduser, responses }),
         fieldDescription: replace_form_field_template_values(originalField.description || '', { enduser, responses }),
-        fieldHtmlDescription: replace_form_field_template_values(originalField.htmlDescription || '', { enduser, responses }),
+        fieldHtmlDescription: replace_form_field_template_values(originalField.htmlDescription || '', { enduser, responses, escapeNewlinesAsHTMLBreaks: true }),
         field: {
           ...response.field,
           title: replace_form_field_template_values(originalField.title || '', { enduser, responses }),
           description: replace_form_field_template_values(originalField.description || '', { enduser, responses }),
-          htmlDescription: replace_form_field_template_values(originalField.htmlDescription || '', { enduser, responses }),
+          htmlDescription: replace_form_field_template_values(originalField.htmlDescription || '', { enduser, responses, escapeNewlinesAsHTMLBreaks: true }),
         }
       }
     })
@@ -1447,12 +1491,14 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
             responses: [
               ...responsesToSubmit,
               // include existing responses in case previously saved as draft
-              ...(existingResponses ?? []).filter(r => 
+              ...(existingResponses ?? []).filter(r =>
                 !responsesToSubmit.find(_r => r.fieldId === _r.fieldId)
                 // but don't include responses which were populated from a patient field and not a prior response
                 // if these are edited, they would be included in responsesToSubmit
                 && !r.isPrepopulatedFromEnduserField
-              ),
+              )
+              // initializeFields leverages filter_stale_choices to strip answers whose options are no longer visible in multiple choice type questions
+              // existingResponses may still carry stale values for fields the user didn't interact with this session, but preserving them as-is avoids unexpected data loss
             ],
             automationStepId,
             customerId,
@@ -1549,6 +1595,7 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
     if (!currentValue) return
     if (isNextDisabled() && currentValue?.answer.type !== 'Hidden Value') return
 
+    lastNavigationDirectionRef.current = 'forward'
     console.log('going to next field')
     if (currentValue.answer.type === 'Question Group') {
       const responsesToSave = (
@@ -1613,6 +1660,7 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
   const goToPreviousField = useCallback(() => {
     if (isPreviousDisabled()) return
 
+    lastNavigationDirectionRef.current = 'backward'
     updateInclusion(false)
 
     const previous = prevFieldStackRef.current.pop()
@@ -1749,6 +1797,7 @@ export const useTellescopeForm = ({ dontAutoadvance, isPublicForm, form, urlLogi
     uploadingFiles, setUploadingFiles,
     handleFileUpload,
     isAutoAdvancing,
+    lastNavigationDirectionRef,
   }
 }
 

package/src/Forms/inputs.tsx

@@ -4895,7 +4895,7 @@ export const RedirectInput = ({ enduserId, groupId, groupInsance, rootResponseId
   return null
 }
 
-export const HiddenValueInput = ({ goToNextField, goToPreviousField, field, value, onChange, isSinglePage, groupFields }: FormInputProps<'email'>) => {
+export const HiddenValueInput = ({ goToNextField, goToPreviousField, field, value, onChange, isSinglePage, groupFields, lastNavigationDirectionRef }: FormInputProps<'email'>) => {
   let lastRef = useRef(0)
   let lastIdRef = useRef('')
 
@@ -4925,7 +4925,10 @@ export const HiddenValueInput = ({ goToNextField, goToPreviousField, field, valu
     lastRef.current = Date.now()
     lastIdRef.current = field.id
 
-    if (value) {
+    // Only collapse backward through a chain of hidden fields when actually navigating backward.
+    // On forward nav (including form resume where existingResponses pre-populate the value),
+    // fall through to the else branch so we re-set and advance instead of bouncing back.
+    if (value && lastNavigationDirectionRef?.current === 'backward') {
       if (isSinglePage) return
       onChange('', field.id)
 
@@ -4939,7 +4942,7 @@ export const HiddenValueInput = ({ goToNextField, goToPreviousField, field, valu
       // pass value that is set after above onChange
       goToNextField?.({ type: 'Hidden Value', value: valueToSet })
     }
-  }, [value, onChange, field.id, valueToSet, goToNextField, goToPreviousField, isSinglePage, dontNavigate])
+  }, [value, onChange, field.id, valueToSet, goToNextField, goToPreviousField, isSinglePage, dontNavigate, lastNavigationDirectionRef])
 
   return <></>
 }

package/src/Forms/inputs.v2.tsx

@@ -2371,56 +2371,7 @@ export const HeightInput = ({ field, value={} as any, onChange, form, ...props }
 )
 
 // Re-export from V1 to follow DRY principles
-export { RedirectInput } from './inputs'
-
-export const HiddenValueInput = ({ goToNextField, goToPreviousField, field, value, onChange, isSinglePage, groupFields }: FormInputProps<'email'>) => {
-  let lastRef = useRef(0)
-  let lastIdRef = useRef('')
-
-  // in a Question Group, only the first Hidden Value should navigate
-  // AND, it should only navigate if the group only contains hidden values
-  const firstHiddenValue = groupFields?.find(v => v.type === 'Hidden Value')
-  const dontNavigate = (
-    (firstHiddenValue && firstHiddenValue?.id !== field.id) // is in a group, but not the first hidden value
-  || !!(groupFields?.find(v => v.type !== 'Hidden Value')) // group contains at least 1 non-hidden value
-  )
-
-  const publicIdentifier = useMemo(() => {
-    try {
-      return new URL(window.location.href).searchParams.get('publicIdentifier') || ''
-    } catch(err) {
-      return ''
-    }
-  }, [])
-
-  const valueToSet = useMemo(() => (
-    (field.title === "{{PUBLIC_IDENTIFIER}}" && publicIdentifier) ? publicIdentifier
-      : field.title
-  ), [field.title, publicIdentifier])
-
-  useEffect(() => {
-    if (lastRef.current > Date.now() - 1000 && lastIdRef.current === field.id) return
-    lastRef.current = Date.now()
-    lastIdRef.current = field.id
-
-    if (value) {
-      if (isSinglePage) return
-      onChange('', field.id)
-
-      if (dontNavigate) return
-      goToPreviousField?.()
-    } else {
-      onChange(valueToSet, field.id)
-
-      if (dontNavigate) return
-
-      // pass value that is set after above onChange
-      goToNextField?.({ type: 'Hidden Value', value: valueToSet })
-    }
-  }, [value, onChange, field.id, valueToSet, goToNextField, goToPreviousField, isSinglePage, dontNavigate])
-
-  return <></>
-}
+export { RedirectInput, HiddenValueInput } from './inputs'
 
 export const EmotiiInput = ({ goToNextField, goToPreviousField, field, value, onChange, form, formResponseId, ...props }: FormInputProps<'email'>) => {
   const session = useResolvedSession()

package/src/Forms/types.ts

@@ -39,6 +39,7 @@ export interface FormInputProps<K extends keyof AnswerForType> {
   setUploadingFiles?: React.Dispatch<React.SetStateAction<{ fieldId: string }[]>>,
   groupFields?: FormField[],
   inputProps?: { sx: SxProps },
+  lastNavigationDirectionRef?: React.MutableRefObject<'forward' | 'backward' | null>,
 }
 
 export type FormInputs = {