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

fix(SW-1115) trigger search

Browse Source
This commit is contained in:
Pontus Dreij
2024-12-11 11:40:45 +01:00
parent 4b51b5aff6
commit 3c9aaa3dd3
7 changed files with 26 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/BookingWidget/Client.tsx
View File

@@ -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() {

3
components/Forms/BookingWidget/FormContent/Input/index.tsx
View File

@@ -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 (
<Body asChild>
<input {...props} ref={ref} className={styles.input} />
<InputRAC {...props} ref={ref} className={styles.input} />
</Body>
)
})

13
components/Forms/BookingWidget/FormContent/Search/index.tsx
View File

@@ -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<BookingWidgetSchema>()
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,13 @@ export default function Search({ locations }: SearchProps) {
...register(name, {
onChange: handleOnChange,
}),
onKeyDown: (e) => {
if (e.key === "Enter") {
if (!isOpen) {
handlePressEnter()
}
}
},
type: "search",
})}
/>

3
components/Forms/BookingWidget/FormContent/index.tsx
View File

@@ -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({
<div className={styles.input}>
<div className={styles.inputContainer}>
<div className={styles.where}>
<Search locations={locations} />
<Search locations={locations} handlePressEnter={onSubmit} />
</div>
<div className={styles.when}>
<Caption color="red" type="bold">

11
components/Forms/BookingWidget/index.tsx
View File

@@ -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 (
<section className={classNames}>
<form
<FormRAC
onSubmit={handleSubmit(onSubmit)}
className={styles.form}
id={formId}
>
<input {...register("location")} type="hidden" />
<FormContent locations={locations} formId={formId} />
</form>
<FormContent
locations={locations}
formId={formId}
onSubmit={handleSubmit(onSubmit)}
/>
</FormRAC>
</section>
)
}

1
types/components/form/bookingwidget.ts
View File

@@ -10,6 +10,7 @@ export interface BookingWidgetFormProps {
export interface BookingWidgetFormContentProps {
locations: Locations
formId: string
onSubmit: () => void
}
export enum ActionType {

1
types/components/search.ts
View File

@@ -7,6 +7,7 @@ import type { Location, Locations } from "../trpc/routers/hotel/locations"
export interface SearchProps {
locations: Locations
handlePressEnter: () => void
}
type HighlightedIndex = number | null