scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: update state based on breakpoint

Browse Source
This commit is contained in:
Christel Westerberg
2024-11-14 14:10:56 +01:00
parent 9189d588d1
commit 446e1c7e51
1 changed files with 7 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/GuestsRoomsPicker/index.tsx
View File

@@ -1,5 +1,6 @@
"use client" "use client"
import { useEffect, useState } from "react"
import { import {
Button, Button,
Dialog, Dialog,
@@ -23,7 +24,8 @@ export default function GuestsRoomsPickerForm() {
const { watch } = useFormContext() const { watch } = useFormContext()
const rooms = watch("rooms") as GuestsRoom[] const rooms = watch("rooms") as GuestsRoom[]
const isDesktop = useMediaQuery("(min-width: 1367px)") const checkIsDesktop = useMediaQuery("(min-width: 1367px)")
const [isDesktop, setIsDesktop] = useState(true)
const htmlElement = const htmlElement =
typeof window !== "undefined" ? document.querySelector("body") : null typeof window !== "undefined" ? document.querySelector("body") : null
@@ -40,6 +42,10 @@ export default function GuestsRoomsPickerForm() {
} }
} }
useEffect(() => {
setIsDesktop(checkIsDesktop)
}, [checkIsDesktop])
return isDesktop ? ( return isDesktop ? (
<DialogTrigger onOpenChange={setOverflowClip}> <DialogTrigger onOpenChange={setOverflowClip}>
<Trigger rooms={rooms} className={styles.triggerDesktop} /> <Trigger rooms={rooms} className={styles.triggerDesktop} />