From e4c58d2b302c637f722c07acc8e0d54a7aacafaa Mon Sep 17 00:00:00 2001 From: Hrishikesh Vaipurkar Date: Wed, 27 Nov 2024 11:49:40 +0100 Subject: [PATCH] fix: SW-1010 Fixed picker closed with invalid data --- components/GuestsRoomsPicker/index.tsx | 39 +++++++++++++++++++++----- 1 file changed, 32 insertions(+), 7 deletions(-) diff --git a/components/GuestsRoomsPicker/index.tsx b/components/GuestsRoomsPicker/index.tsx index b37d92730..59be157df 100644 --- a/components/GuestsRoomsPicker/index.tsx +++ b/components/GuestsRoomsPicker/index.tsx @@ -21,18 +21,19 @@ import styles from "./guests-rooms-picker.module.css" import { GuestsRoom } from "@/types/components/bookingWidget/guestsRoomsPicker" export default function GuestsRoomsPickerForm() { - const { watch } = useFormContext() + const { watch, trigger } = useFormContext() const rooms = watch("rooms") as GuestsRoom[] const checkIsDesktop = useMediaQuery("(min-width: 1367px)") const [isDesktop, setIsDesktop] = useState(true) + const [isOpen, setIsOpen] = useState(true) const [containerHeight, setContainerHeight] = useState(0) const childCount = rooms[0] ? rooms[0].child.length : 0 // ToDo Update for multiroom later const htmlElement = typeof window !== "undefined" ? document.querySelector("body") : null //isOpen is the 'old state', so isOpen === true means "The modal is open and WILL be closed". - function setOverflowClip(isOpen: boolean) { + async function setOverflowClip(isOpen: boolean) { if (htmlElement) { if (isOpen) { htmlElement.style.overflow = "visible" @@ -42,6 +43,12 @@ export default function GuestsRoomsPickerForm() { htmlElement.style.overflow = "clip !important" } } + if (!isOpen) { + const state = await trigger("rooms") + if (state) { + setIsOpen(isOpen) + } + } } useEffect(() => { @@ -82,8 +89,14 @@ export default function GuestsRoomsPickerForm() { }, [childCount, isDesktop, updateHeight]) return isDesktop ? ( - - + + { + setIsOpen(true) + }} + /> ) : ( - - + + { + setIsOpen(true) + }} + /> {({ close }) => } @@ -115,14 +134,20 @@ export default function GuestsRoomsPickerForm() { function Trigger({ rooms, className, + triggerFn, }: { rooms: GuestsRoom[] className: string + triggerFn?: () => void }) { const intl = useIntl() return ( -