Merged in feat/SW-2202 (pull request #1909)

feat: trigger validation on form upon autofill in enter details

* feat: trigger validation on form upon autofill in enter details


Approved-by: Niclas Edenvin

apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/AutoFillDetector.tsx

@@ -0,0 +1,31 @@
+"use client"
+import { useEffect } from "react"
+import { useFormContext } from "react-hook-form"
+
+export default function AutoFillDetector() {
+  const {
+    formState: { dirtyFields, isDirty, touchedFields },
+    trigger,
+    watch,
+  } = useFormContext()
+
+  useEffect(() => {
+    const dirtyFieldKeys = Object.keys(dirtyFields)
+    const touchedFieldKeys = Object.keys(touchedFields)
+    const hasDirtyUnTouchedFields = dirtyFieldKeys.some(
+      (field) => !touchedFieldKeys.includes(field)
+    )
+    const subscription = watch((_, field) => {
+      if (!field.type) {
+        if (isDirty && hasDirtyUnTouchedFields) {
+          trigger(field.name)
+          trigger("countryCode")
+        }
+      }
+    })
+
+    return () => subscription.unsubscribe()
+  }, [dirtyFields, isDirty, touchedFields, trigger, watch])
+
+  return null
+}

apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/index.tsx

@@ -11,6 +11,7 @@ import Phone from "@/components/TempDesignSystem/Form/Phone"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import { useRoomContext } from "@/contexts/Details/Room"
 
+import AutoFillDetector from "./AutoFillDetector"
 import JoinScandicFriendsCard from "./JoinScandicFriendsCard"
 import { guestDetailsSchema, signedInDetailsSchema } from "./schema"
 import Signup from "./Signup"
@@ -150,6 +151,7 @@ export default function Details({ user }: DetailsProps) {
             registerOptions={{ required: true, onBlur: updateDetailsStore }}
           />
         </div>
+        <AutoFillDetector />
       </form>
     </FormProvider>
   )