fix: SW-1010 Fixed picker closed with invalid data

2024-11-27 11:49:40 +01:00
parent bf60306236
commit e4c58d2b30
1 changed files with 32 additions and 7 deletions
--- 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 ? (
-    <DialogTrigger onOpenChange={setOverflowClip}>
-      <Trigger rooms={rooms} className={styles.triggerDesktop} />
+    <DialogTrigger onOpenChange={setOverflowClip} isOpen={isOpen}>
+      <Trigger
+        rooms={rooms}
+        className={styles.triggerDesktop}
+        triggerFn={() => {
+          setIsOpen(true)
+        }}
+      />
      <Popover
        placement="bottom start"
        offset={36}
@@ -101,8 +114,14 @@ export default function GuestsRoomsPickerForm() {
      </Popover>
    </DialogTrigger>
  ) : (
-    <DialogTrigger>
-      <Trigger rooms={rooms} className={styles.triggerMobile} />
+    <DialogTrigger onOpenChange={setOverflowClip} isOpen={isOpen}>
+      <Trigger
+        rooms={rooms}
+        className={styles.triggerMobile}
+        triggerFn={() => {
+          setIsOpen(true)
+        }}
+      />
      <Modal>
        <Dialog className={styles.pickerContainerMobile}>
          {({ close }) => <PickerForm rooms={rooms} onClose={close} />}
@@ -115,14 +134,20 @@ export default function GuestsRoomsPickerForm() {
 function Trigger({
  rooms,
  className,
+  triggerFn,
 }: {
  rooms: GuestsRoom[]
  className: string
+  triggerFn?: () => void
 }) {
  const intl = useIntl()

  return (
-    <Button className={`${className} ${styles.btn}`} type="button">
+    <Button
+      className={`${className} ${styles.btn}`}
+      type="button"
+      onPress={triggerFn}
+    >
      <Body>
        {rooms.map((room, i) => (
          <span key={i}>