diff --git a/components/BookingWidget/Client.tsx b/components/BookingWidget/Client.tsx index 84ac08cba..3c17caf8e 100644 --- a/components/BookingWidget/Client.tsx +++ b/components/BookingWidget/Client.tsx @@ -114,9 +114,9 @@ export default function BookingWidgetClient({ rooms: defaultRoomsData, }, shouldFocusError: false, - mode: "all", + mode: "onSubmit", resolver: zodResolver(bookingWidgetSchema), - reValidateMode: "onChange", + reValidateMode: "onSubmit", }) function closeMobileSearch() { diff --git a/components/Forms/BookingWidget/FormContent/Input/index.tsx b/components/Forms/BookingWidget/FormContent/Input/index.tsx index 7a592f594..160279b75 100644 --- a/components/Forms/BookingWidget/FormContent/Input/index.tsx +++ b/components/Forms/BookingWidget/FormContent/Input/index.tsx @@ -1,4 +1,5 @@ import React, { forwardRef, InputHTMLAttributes } from "react" +import { Input as InputRAC } from "react-aria-components" import Body from "@/components/TempDesignSystem/Text/Body" @@ -10,7 +11,7 @@ const Input = forwardRef< >(function InputComponent(props, ref) { return ( - + ) }) diff --git a/components/Forms/BookingWidget/FormContent/Search/index.tsx b/components/Forms/BookingWidget/FormContent/Search/index.tsx index 93d99a89b..4d833a5e4 100644 --- a/components/Forms/BookingWidget/FormContent/Search/index.tsx +++ b/components/Forms/BookingWidget/FormContent/Search/index.tsx @@ -27,8 +27,8 @@ import type { Location } from "@/types/trpc/routers/hotel/locations" const name = "search" -export default function Search({ locations }: SearchProps) { - const { register, setValue, trigger, unregister } = +export default function Search({ locations, handlePressEnter }: SearchProps) { + const { register, setValue, unregister } = useFormContext() const intl = useIntl() const value = useWatch({ name }) @@ -90,7 +90,6 @@ export default function Search({ locations }: SearchProps) { setValue("location", encodeURIComponent(stringified)) sessionStorage.setItem(sessionStorageKey, stringified) setValue(name, selectedItem.name) - trigger() const searchHistoryMap = new Map() searchHistoryMap.set(selectedItem.name, selectedItem) @@ -165,6 +164,7 @@ export default function Search({ locations }: SearchProps) { itemToString={(value) => (value ? value.name : "")} onSelect={handleOnSelect} onInputValueChange={(inputValue) => dispatchInputValue(inputValue)} + defaultHighlightedIndex={0} > {({ getInputProps, @@ -209,6 +209,11 @@ export default function Search({ locations }: SearchProps) { ...register(name, { onChange: handleOnChange, }), + onKeyDown: (e) => { + if (e.key === "Enter" && !isOpen) { + handlePressEnter() + } + }, type: "search", })} /> diff --git a/components/Forms/BookingWidget/FormContent/index.tsx b/components/Forms/BookingWidget/FormContent/index.tsx index 59938628b..10948df97 100644 --- a/components/Forms/BookingWidget/FormContent/index.tsx +++ b/components/Forms/BookingWidget/FormContent/index.tsx @@ -21,6 +21,7 @@ import type { BookingWidgetFormContentProps } from "@/types/components/form/book export default function FormContent({ locations, formId, + onSubmit, }: BookingWidgetFormContentProps) { const intl = useIntl() const selectedDate = useWatch({ name: "date" }) @@ -34,7 +35,7 @@ export default function FormContent({
- +
diff --git a/components/Forms/BookingWidget/index.tsx b/components/Forms/BookingWidget/index.tsx index 3f7e5aa82..86847ce2e 100644 --- a/components/Forms/BookingWidget/index.tsx +++ b/components/Forms/BookingWidget/index.tsx @@ -1,5 +1,6 @@ "use client" import { useRouter } from "next/navigation" +import { Form as FormRAC } from "react-aria-components" import { useFormContext } from "react-hook-form" import { selectHotel, selectRate } from "@/constants/routes/hotelReservation" @@ -62,14 +63,18 @@ export default function Form({ return (
-
- - + +
) } diff --git a/types/components/form/bookingwidget.ts b/types/components/form/bookingwidget.ts index bded82de3..e04a1ec9a 100644 --- a/types/components/form/bookingwidget.ts +++ b/types/components/form/bookingwidget.ts @@ -10,6 +10,7 @@ export interface BookingWidgetFormProps { export interface BookingWidgetFormContentProps { locations: Locations formId: string + onSubmit: () => void } export enum ActionType { diff --git a/types/components/search.ts b/types/components/search.ts index 42401045f..edc27058e 100644 --- a/types/components/search.ts +++ b/types/components/search.ts @@ -7,6 +7,7 @@ import type { Location, Locations } from "../trpc/routers/hotel/locations" export interface SearchProps { locations: Locations + handlePressEnter: () => void } type HighlightedIndex = number | null