diff --git a/components/BookingWidget/MobileToggleButton/index.tsx b/components/BookingWidget/MobileToggleButton/index.tsx index 9159ef400..80026ff93 100644 --- a/components/BookingWidget/MobileToggleButton/index.tsx +++ b/components/BookingWidget/MobileToggleButton/index.tsx @@ -80,7 +80,7 @@ export default function MobileToggleButton({ {!locationAndDateIsSet && ( <>
- + {intl.formatMessage({ id: "Where to" })} @@ -91,7 +91,7 @@ export default function MobileToggleButton({
- + {intl.formatMessage( { id: "booking.nights" }, { totalNights: nights } diff --git a/components/Forms/BookingWidget/FormContent/Search/SearchList/index.tsx b/components/Forms/BookingWidget/FormContent/Search/SearchList/index.tsx index a8736e69d..c66c8e10b 100644 --- a/components/Forms/BookingWidget/FormContent/Search/SearchList/index.tsx +++ b/components/Forms/BookingWidget/FormContent/Search/SearchList/index.tsx @@ -29,17 +29,23 @@ export default function SearchList({ }: SearchListProps) { const intl = useIntl() const [hasMounted, setHasMounted] = useState(false) + const [isFormSubmitted, setIsFormSubmitted] = useState(false) const { clearErrors, - formState: { errors }, + formState: { errors, isSubmitted }, } = useFormContext() const searchError = errors["search"] + useEffect(() => { + setIsFormSubmitted(isSubmitted) + }, [isSubmitted]) + useEffect(() => { let timeoutID: ReturnType | null = null if (searchError && searchError.message === "Required") { timeoutID = setTimeout(() => { clearErrors("search") + setIsFormSubmitted(false) // magic number originates from animation // 5000ms delay + 120ms exectuion }, 5120) @@ -60,7 +66,7 @@ export default function SearchList({ return null } - if (searchError) { + if (searchError && isFormSubmitted) { if (typeof searchError.message === "string") { if (!isOpen) { if (searchError.message === "Required") { diff --git a/components/Forms/BookingWidget/FormContent/Search/index.tsx b/components/Forms/BookingWidget/FormContent/Search/index.tsx index 5461426a7..109af79a3 100644 --- a/components/Forms/BookingWidget/FormContent/Search/index.tsx +++ b/components/Forms/BookingWidget/FormContent/Search/index.tsx @@ -48,13 +48,10 @@ export default function Search({ locations }: SearchProps) { dispatch({ type: ActionType.CLEAR_HISTORY_LOCATIONS }) } - function handleOnChange( - evt: FormEvent | ChangeEvent - ) { - const value = evt.currentTarget.value - if (value) { + function dispatchInputValue(inputValue: string) { + if (inputValue) { dispatch({ - payload: { search: value }, + payload: { search: inputValue }, type: ActionType.SEARCH_LOCATIONS, }) } else { @@ -62,6 +59,14 @@ export default function Search({ locations }: SearchProps) { } } + function handleOnChange( + evt: FormEvent | ChangeEvent + ) { + const newValue = evt.currentTarget.value + setValue(name, newValue) + dispatchInputValue(value) + } + function handleOnFocus(evt: FocusEvent) { const searchValue = evt.currentTarget.value if (searchValue) { @@ -114,6 +119,7 @@ export default function Search({ locations }: SearchProps) { inputValue={value} itemToString={(value) => (value ? value.name : "")} onSelect={handleOnSelect} + onInputValueChange={(inputValue) => dispatchInputValue(inputValue)} > {({ closeMenu, @@ -128,7 +134,11 @@ export default function Search({ locations }: SearchProps) { }) => (