fix: validation

components/GuestsRoomsPicker/Form.tsx

@@ -1,6 +1,7 @@
 "use client"
 
-import { useFormContext } from "react-hook-form"
+import { useEffect } from "react"
+import { useFormContext, useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { CloseLargeIcon, PlusCircleIcon, PlusIcon } from "../Icons"
@@ -35,7 +36,24 @@ export default function GuestsRoomsPickerDialog({
   })
   const addRoomLabel = intl.formatMessage({ id: "Add Room" })
 
-  const { getFieldState } = useFormContext<BookingWidgetSchema>()
+  const { getFieldState, trigger } = useFormContext<BookingWidgetSchema>()
+
+  const roomsValue = useWatch({ name: "rooms" })
+
+  async function handleOnClose() {
+    const state = await trigger("rooms")
+    if (state) {
+      onClose()
+    }
+  }
+
+  const fieldState = getFieldState("rooms")
+
+  useEffect(() => {
+    if (fieldState.invalid) {
+      trigger("rooms")
+    }
+  }, [roomsValue, fieldState.invalid, trigger])
 
   return (
     <>
@@ -124,7 +142,7 @@ export default function GuestsRoomsPickerDialog({
           </Tooltip>
         </div>
         <Button
-          onPress={onClose}
+          onPress={handleOnClose}
           disabled={getFieldState("rooms").invalid}
           className={styles.hideOnMobile}
           intent="tertiary"
@@ -134,7 +152,7 @@ export default function GuestsRoomsPickerDialog({
           {doneLabel}
         </Button>
         <Button
-          onPress={onClose}
+          onPress={handleOnClose}
           disabled={getFieldState("rooms").invalid}
           className={styles.hideOnDesktop}
           intent="tertiary"