Ichitux/ZLB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hotfix scroll up when submit form

Browse Source
This commit is contained in:
Antoni Nuñez Romeu
2026-03-13 10:59:46 +01:00
parent 459792bdb0
commit 681d528c9e
1 changed files with 10 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/BookingSection.tsx
View File

@@ -45,6 +45,7 @@ const BookingSection = () => {
const [showCountryDropdown, setShowCountryDropdown] = useState(false); const [showCountryDropdown, setShowCountryDropdown] = useState(false);
const countryDropdownRef = useRef<HTMLDivElement>(null); const countryDropdownRef = useRef<HTMLDivElement>(null);
const countryInputRef = useRef<HTMLInputElement>(null); const countryInputRef = useRef<HTMLInputElement>(null);
const sectionRef = useRef<HTMLElement>(null);
// Generate unique requestId on component mount // Generate unique requestId on component mount
useEffect(() => { useEffect(() => {
const uniqueId = `REQ-${Date.now()}-${Math.floor(Math.random() * 10000)}`; const uniqueId = `REQ-${Date.now()}-${Math.floor(Math.random() * 10000)}`;
@@ -107,6 +108,13 @@ const BookingSection = () => {
return () => document.removeEventListener('mousedown', handleClickOutside); return () => document.removeEventListener('mousedown', handleClickOutside);
}, [showCountryDropdown]); }, [showCountryDropdown]);
// Ensure the booking section stays in view when status changes (e.g., after submit)
useEffect(() => {
if (status === "success" || status === "error") {
sectionRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
}
}, [status]);
const handleSubmit = async (e: React.FormEvent) => { const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();
setErrors({}); setErrors({});
@@ -141,7 +149,7 @@ const BookingSection = () => {
if (status === "success") { if (status === "success") {
return ( return (
<section id="booking" className="section-padding bg-background"> <section id="booking" ref={sectionRef} className="section-padding bg-background scroll-mt-24">
<motion.div <motion.div
initial={{ opacity: 0, scale: 0.9 }} initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }} animate={{ opacity: 1, scale: 1 }}
@@ -160,7 +168,7 @@ const BookingSection = () => {
} }
return ( return (
<section id="booking" className="section-padding bg-background"> <section id="booking" ref={sectionRef} className="section-padding bg-background scroll-mt-24">
<div className="container mx-auto max-w-2xl"> <div className="container mx-auto max-w-2xl">
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}