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

Merged in fix/SW-1115-use-enter-to-search (pull request #1067)

Browse Source 
fix(SW-1115) trigger search

Approved-by: Niclas Edenvin
This commit is contained in:
Pontus Dreij
2024-12-11 12:02:45 +00:00
parent 4b51b5aff6 df6333fa22
commit 38f872a1f3
7 changed files with 24 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, rooms: defaultRoomsData,
}, },
shouldFocusError: false, shouldFocusError: false,
mode: "all", mode: "onSubmit",
resolver: zodResolver(bookingWidgetSchema), resolver: zodResolver(bookingWidgetSchema),
reValidateMode: "onChange", reValidateMode: "onSubmit",
}) })
function closeMobileSearch() { function closeMobileSearch() {

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

@@ -1,4 +1,5 @@
import React, { forwardRef, InputHTMLAttributes } from "react" import React, { forwardRef, InputHTMLAttributes } from "react"
import { Input as InputRAC } from "react-aria-components"
import Body from "@/components/TempDesignSystem/Text/Body" import Body from "@/components/TempDesignSystem/Text/Body"
@@ -10,7 +11,7 @@ const Input = forwardRef<
>(function InputComponent(props, ref) { >(function InputComponent(props, ref) {
return ( return (
<Body asChild> <Body asChild>
<input {...props} ref={ref} className={styles.input} /> <InputRAC {...props} ref={ref} className={styles.input} />
</Body> </Body>
) )
}) })

11
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" const name = "search"
export default function Search({ locations }: SearchProps) { export default function Search({ locations, handlePressEnter }: SearchProps) {
const { register, setValue, trigger, unregister } = const { register, setValue, unregister } =
useFormContext<BookingWidgetSchema>() useFormContext<BookingWidgetSchema>()
const intl = useIntl() const intl = useIntl()
const value = useWatch({ name }) const value = useWatch({ name })
@@ -90,7 +90,6 @@ export default function Search({ locations }: SearchProps) {
setValue("location", encodeURIComponent(stringified)) setValue("location", encodeURIComponent(stringified))
sessionStorage.setItem(sessionStorageKey, stringified) sessionStorage.setItem(sessionStorageKey, stringified)
setValue(name, selectedItem.name) setValue(name, selectedItem.name)
trigger()
const searchHistoryMap = new Map() const searchHistoryMap = new Map()
searchHistoryMap.set(selectedItem.name, selectedItem) searchHistoryMap.set(selectedItem.name, selectedItem)
@@ -165,6 +164,7 @@ export default function Search({ locations }: SearchProps) {
itemToString={(value) => (value ? value.name : "")} itemToString={(value) => (value ? value.name : "")}
onSelect={handleOnSelect} onSelect={handleOnSelect}
onInputValueChange={(inputValue) => dispatchInputValue(inputValue)} onInputValueChange={(inputValue) => dispatchInputValue(inputValue)}
defaultHighlightedIndex={0}
> >
{({ {({
getInputProps, getInputProps,
@@ -209,6 +209,11 @@ export default function Search({ locations }: SearchProps) {
...register(name, { ...register(name, {
onChange: handleOnChange, onChange: handleOnChange,
}), }),
onKeyDown: (e) => {
if (e.key === "Enter" && !isOpen) {
handlePressEnter()
}
},
type: "search", 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({ export default function FormContent({
locations, locations,
formId, formId,
onSubmit,
}: BookingWidgetFormContentProps) { }: BookingWidgetFormContentProps) {
const intl = useIntl() const intl = useIntl()
const selectedDate = useWatch({ name: "date" }) const selectedDate = useWatch({ name: "date" })
@@ -34,7 +35,7 @@ export default function FormContent({
<div className={styles.input}> <div className={styles.input}>
<div className={styles.inputContainer}> <div className={styles.inputContainer}>
<div className={styles.where}> <div className={styles.where}>
<Search locations={locations} /> <Search locations={locations} handlePressEnter={onSubmit} />
</div> </div>
<div className={styles.when}> <div className={styles.when}>
<Caption color="red" type="bold"> <Caption color="red" type="bold">

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

@@ -1,5 +1,6 @@
"use client" "use client"
import { useRouter } from "next/navigation" import { useRouter } from "next/navigation"
import { Form as FormRAC } from "react-aria-components"
import { useFormContext } from "react-hook-form" import { useFormContext } from "react-hook-form"
import { selectHotel, selectRate } from "@/constants/routes/hotelReservation" import { selectHotel, selectRate } from "@/constants/routes/hotelReservation"
@@ -62,14 +63,18 @@ export default function Form({
return ( return (
<section className={classNames}> <section className={classNames}>
<form <FormRAC
onSubmit={handleSubmit(onSubmit)} onSubmit={handleSubmit(onSubmit)}
className={styles.form} className={styles.form}
id={formId} id={formId}
> >
<input {...register("location")} type="hidden" /> <input {...register("location")} type="hidden" />
<FormContent locations={locations} formId={formId} /> <FormContent
</form> locations={locations}
formId={formId}
onSubmit={handleSubmit(onSubmit)}
/>
</FormRAC>
</section> </section>
) )
} }

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

@@ -10,6 +10,7 @@ export interface BookingWidgetFormProps {
export interface BookingWidgetFormContentProps { export interface BookingWidgetFormContentProps {
locations: Locations locations: Locations
formId: string formId: string
onSubmit: () => void
} }
export enum ActionType { 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 { export interface SearchProps {
locations: Locations locations: Locations
handlePressEnter: () => void
} }
type HighlightedIndex = number | null type HighlightedIndex = number | null