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/DatePicker/date-picker.module.css b/components/DatePicker/date-picker.module.css
index b2e23cd41..ee9034648 100644
--- a/components/DatePicker/date-picker.module.css
+++ b/components/DatePicker/date-picker.module.css
@@ -14,6 +14,7 @@
outline: none;
padding: 0;
width: 100%;
+ text-align: left;
}
.body {
diff --git a/components/Forms/BookingWidget/FormContent/Search/SearchList/index.tsx b/components/Forms/BookingWidget/FormContent/Search/SearchList/index.tsx
index a8736e69d..978bf877a 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) // Update form submission state
+ }, [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..c3de24662 100644
--- a/components/Forms/BookingWidget/FormContent/Search/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/Search/index.tsx
@@ -128,7 +128,11 @@ export default function Search({ locations }: SearchProps) {
}) => (