Feat/short answer prefill progressive disclosure

apps/backend/src/app/models/__tests__/form_fields.schema.spec.ts

@@ -233,25 +233,18 @@ describe('Form Field Schema', () => {
         expect(fieldObj).toHaveProperty('lockPrefill', true)
       })
 
-      it('should not allow creation of short text field with allowPrefill = false and lockPrefill = true settings', async () => {
+      it('should remember lockPrefill = true even when allowPrefill = false (lock persists independently of prefill)', async () => {
         // Arrange
-        const createField = async () => {
-          const field = await createAndReturnFormField({
-            fieldType: BasicField.ShortText,
-            allowPrefill: false,
-            lockPrefill: true,
-          })
-
-          return field
-        }
-
-        // Act
-        const createFieldPromise = createField()
+        const field = await createAndReturnFormField({
+          fieldType: BasicField.ShortText,
+          allowPrefill: false,
+          lockPrefill: true,
+        })
 
         // Assert
-        await expect(createFieldPromise).rejects.toThrow(
-          'Cannot lock prefill if prefill is not enabled',
-        )
+        const fieldObj = field.toObject()
+        expect(fieldObj).toHaveProperty('allowPrefill', false)
+        expect(fieldObj).toHaveProperty('lockPrefill', true)
       })
     })
   })

apps/backend/src/app/models/field/shortTextField.ts

@@ -22,20 +22,9 @@ const createShortTextFieldSchema = () => {
       default: false,
     },
     lockPrefill: {
-      // locks prefill if it is enabled
       type: Boolean,
       default: false,
       required: false,
-      // Only allow lock prefill if prefill is enabled
-      validate: {
-        validator: function (this: IShortTextFieldSchema) {
-          if (!this.allowPrefill && this.lockPrefill) {
-            return false
-          }
-          return true
-        },
-        message: 'Cannot lock prefill if prefill is not enabled',
-      },
     },
   })
 

apps/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditShortText/EditShortText.stories.tsx

@@ -75,3 +75,12 @@ PrefillWithFieldId.args = {
     _id: 'mock-field-id-allow-copy',
   },
 }
+
+export const PrefillLocked = Template.bind({})
+PrefillLocked.args = {
+  field: {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    ...PrefillWithFieldId.args.field!,
+    lockPrefill: true,
+  },
+}

apps/frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditShortText/EditShortText.tsx

@@ -1,12 +1,11 @@
-import { useEffect, useMemo, useRef } from 'react'
+import { useEffect, useMemo } from 'react'
 import { Controller, RegisterOptions } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import {
   FormControl,
   InputGroup,
   InputRightElement,
   SimpleGrid,
-  useMergeRefs,
 } from '@chakra-ui/react'
 import { extend, isEmpty, pick } from 'lodash'
 
@@ -120,26 +119,7 @@ export const EditShortText = ({ field }: EditShortTextProps): JSX.Element => {
     'ValidationOptions.selectedValidation',
   )
 
-  const hasLockPrefillRef = useRef<HTMLInputElement>(null)
-
-  const lockPrefillRegister = useMemo(() => register('lockPrefill'), [register])
-
-  const mergedLockPrefillRef = useMergeRefs(
-    hasLockPrefillRef,
-    lockPrefillRegister.ref,
-  )
-
   const watchAllowPrefill = watch('allowPrefill')
-  const watchLockPrefill = watch('lockPrefill')
-
-  useEffect(() => {
-    // Prefill must be enabled for lockPrefill
-    // We cannot simply use setValue as it does not update
-    // the UI
-    if (!watchAllowPrefill && watchLockPrefill) {
-      hasLockPrefillRef.current?.click()
-    }
-  }, [watchAllowPrefill, watchLockPrefill])
 
   const customValValidationOptions: RegisterOptions<
     EditShortTextInputs,
@@ -272,15 +252,23 @@ export const EditShortText = ({ field }: EditShortTextProps): JSX.Element => {
           </>
         ) : null}
       </FormControl>
-      <FormControl isReadOnly={isLoading}>
-        <Toggle
-          {...lockPrefillRegister}
-          ref={mergedLockPrefillRef}
-          label="Prevent pre-fill editing"
-          description="This prevents respondents from clicking the field to edit it. However, field content can still be modified via the URL."
-          isDisabled={!watchAllowPrefill}
-        />
-      </FormControl>
+      {watchAllowPrefill ? (
+        <FormControl isReadOnly={isLoading}>
+          <Controller
+            name="lockPrefill"
+            control={control}
+            render={({ field: { value, onChange, ...rest } }) => (
+              <Toggle
+                {...rest}
+                isChecked={!!value}
+                onChange={onChange}
+                label="Prevent pre-fill editing"
+                description="This prevents respondents from clicking the field to edit it. However, field content can still be modified via the URL."
+              />
+            )}
+          />
+        </FormControl>
+      ) : null}
       <FormFieldDrawerActions
         isLoading={isLoading}
         buttonText={buttonText}