@eventlook/sdk 1.4.49-beta.5 → 1.4.49-beta.7

package/src/form/PaymentOverviewDrawer.tsx

@@ -10,60 +10,92 @@ import { EVENTLOOK_ORDER_FORM_ID } from '@utils/data/global.ts';
 interface Props {
   event: IEvent;
   totalPrice: number;
+  termsAndConditionsRef?: React.RefObject<HTMLElement | null>;
   onOpenChange?: (open: boolean) => void;
 }
 
 const swipeAreaWidth = 120;
 
-const PaymentOverviewDrawer: React.FC<Props> = ({ event, totalPrice, onOpenChange }) => {
+const clearResetPulledPastTimeout = (timeoutRef: { current: number | null }) => {
+  if (timeoutRef.current !== null) {
+    window.clearTimeout(timeoutRef.current);
+    timeoutRef.current = null;
+  }
+};
+
+const PaymentOverviewDrawer: React.FC<Props> = ({
+  event,
+  totalPrice,
+  termsAndConditionsRef,
+  onOpenChange,
+}) => {
   const { t, lang } = useGlobal();
-  const [openDrawer, setOpenDrawer] = useState(false);
+  const [isDrawerOpened, setIsDrawerOpened] = useState(false);
   const [isOpeningGesture, setIsOpeningGesture] = useState(false);
   const [hasPulledPastClosedTabHeight, setHasPulledPastClosedTabHeight] = useState(false);
+  const [isDrawerHidden, setIsDrawerHidden] = useState(false);
   const [closedTabHeight, setClosedTabHeight] = useState(0);
   const openingTouchStartYRef = useRef<number | null>(null);
   const openDrawerRef = useRef(false);
+  const isOpeningGestureRef = useRef(false);
+  const shouldReopenOnScrollUpRef = useRef(false);
+  const lastScrollYRef = useRef(0);
+  const isScrollingDownRef = useRef(false);
+  const wasAtPageBottomRef = useRef(false);
   const resetPulledPastTimeoutRef = useRef<number | null>(null);
   const closedTabRef = useRef<HTMLDivElement>(null);
 
-  const sentinelRef = useRef<HTMLDivElement>(null);
-  const prevYRef = useRef<number>(Number.POSITIVE_INFINITY);
+  useEffect(() => {
+    openDrawerRef.current = isDrawerOpened;
+  }, [isDrawerOpened]);
 
-  // Opens drawer when scrolling down
   useEffect(() => {
-    const sentinel = sentinelRef.current;
-    if (!sentinel) return;
+    isOpeningGestureRef.current = isOpeningGesture;
+  }, [isOpeningGesture]);
 
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (totalPrice <= 0) return;
-          const currentY = entry.boundingClientRect.y;
-          const isScrollingDown = currentY < prevYRef.current;
+  // reopens the drawer when user scrolls up and the drawer was closed by scrolling down to the bottom of the page
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
 
-          if (entry.isIntersecting && isScrollingDown) {
-            openDrawerHandler();
-          }
+    const atBottomThreshold = 8;
+    lastScrollYRef.current = window.scrollY;
+    isScrollingDownRef.current = false;
+    wasAtPageBottomRef.current =
+      window.innerHeight + window.scrollY >=
+      document.documentElement.scrollHeight - atBottomThreshold;
 
-          prevYRef.current = currentY;
-        });
-      },
-      {
-        threshold: 0,
-        rootMargin: '0px 0px 0px 0px',
+    const handleScroll = () => {
+      const currentY = window.scrollY;
+      const isScrollingUp = currentY < lastScrollYRef.current;
+      const isScrollingDown = currentY > lastScrollYRef.current;
+      const isAtPageBottom =
+        window.innerHeight + currentY >= document.documentElement.scrollHeight - atBottomThreshold;
+
+      isScrollingDownRef.current = isScrollingDown;
+
+      if (
+        isScrollingUp &&
+        wasAtPageBottomRef.current &&
+        shouldReopenOnScrollUpRef.current &&
+        !openDrawerRef.current
+      ) {
+        shouldReopenOnScrollUpRef.current = false;
+        setIsDrawerHidden(false);
+        openDrawerHandler();
       }
-    );
 
-    observer.observe(sentinel);
+      wasAtPageBottomRef.current = isAtPageBottom;
+      lastScrollYRef.current = currentY;
+    };
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
 
     return () => {
-      observer.unobserve(sentinel);
+      window.removeEventListener('scroll', handleScroll);
     };
-  }, [totalPrice]);
-
-  useEffect(() => {
-    openDrawerRef.current = openDrawer;
-  }, [openDrawer]);
+  }, []);
 
   useEffect(() => {
     const closedTab = closedTabRef.current;
@@ -88,50 +120,129 @@ const PaymentOverviewDrawer: React.FC<Props> = ({ event, totalPrice, onOpenChang
 
   useEffect(
     () => () => {
-      if (resetPulledPastTimeoutRef.current !== null) {
-        window.clearTimeout(resetPulledPastTimeoutRef.current);
-      }
+      clearResetPulledPastTimeout(resetPulledPastTimeoutRef);
     },
     []
   );
 
+  useEffect(() => {
+    const termsAndConditionsElement = termsAndConditionsRef?.current;
+    if (!termsAndConditionsElement) {
+      return;
+    }
+
+    if (!('IntersectionObserver' in window)) {
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        const hasReachedTermsSection = entry?.isIntersecting ?? false;
+        const shouldAutoCloseDrawer = hasReachedTermsSection;
+        const shouldHideDrawerTab =
+          hasReachedTermsSection && !openDrawerRef.current && !isOpeningGestureRef.current;
+        setIsDrawerHidden(shouldHideDrawerTab);
+
+        if (shouldAutoCloseDrawer && openDrawerRef.current && isScrollingDownRef.current) {
+          closeDrawerHandler({ shouldReopenOnScrollUp: true });
+          setIsDrawerHidden(true);
+        }
+      },
+      {
+        root: null,
+        threshold: 0,
+        rootMargin: '0px 0px -40% 0px',
+      }
+    );
+
+    observer.observe(termsAndConditionsElement);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [termsAndConditionsRef]);
+
   const toggleDrawer = () => {
-    setOpenDrawer((prev) => {
-      const next = !prev;
-      onOpenChange?.(next);
-      return next;
-    });
+    if (openDrawerRef.current) {
+      closeDrawerHandler();
+      return;
+    }
+
+    openDrawerHandler();
   };
 
   const openDrawerHandler = () => {
-    if (resetPulledPastTimeoutRef.current !== null) {
-      window.clearTimeout(resetPulledPastTimeoutRef.current);
-      resetPulledPastTimeoutRef.current = null;
-    }
+    clearResetPulledPastTimeout(resetPulledPastTimeoutRef);
     setIsOpeningGesture(false);
     setHasPulledPastClosedTabHeight(false);
     openingTouchStartYRef.current = null;
-    setOpenDrawer(true);
+    shouldReopenOnScrollUpRef.current = false;
+    setIsDrawerOpened(true);
     onOpenChange?.(true);
   };
 
-  const closeDrawerHandler = () => {
-    if (resetPulledPastTimeoutRef.current !== null) {
-      window.clearTimeout(resetPulledPastTimeoutRef.current);
-      resetPulledPastTimeoutRef.current = null;
-    }
+  const closeDrawerHandler = ({
+    shouldReopenOnScrollUp = false,
+  }: { shouldReopenOnScrollUp?: boolean } = {}) => {
+    clearResetPulledPastTimeout(resetPulledPastTimeoutRef);
     setIsOpeningGesture(false);
     setHasPulledPastClosedTabHeight(false);
     openingTouchStartYRef.current = null;
-    setOpenDrawer(false);
+    shouldReopenOnScrollUpRef.current = shouldReopenOnScrollUp;
+    setIsDrawerOpened(false);
     onOpenChange?.(false);
   };
 
+  const scheduleResetPulledPastTimeout = () => {
+    clearResetPulledPastTimeout(resetPulledPastTimeoutRef);
+    resetPulledPastTimeoutRef.current = window.setTimeout(() => {
+      if (!openDrawerRef.current) {
+        setHasPulledPastClosedTabHeight(false);
+      }
+    }, 180);
+  };
+
+  const handleGestureStart = (startY: number | null) => {
+    openingTouchStartYRef.current = startY;
+    setIsOpeningGesture(true);
+    setHasPulledPastClosedTabHeight(false);
+  };
+
+  const handleGestureMove = (currentY?: number) => {
+    if (!isOpeningGestureRef.current) return;
+
+    const startY = openingTouchStartYRef.current;
+    if (startY === null || typeof currentY !== 'number') return;
+
+    const pullDistance = startY - currentY;
+    const currentClosedTabHeight = closedTabRef.current?.offsetHeight ?? 0;
+    setHasPulledPastClosedTabHeight(
+      currentClosedTabHeight > 0 && pullDistance >= currentClosedTabHeight
+    );
+  };
+
+  const handleGestureCancel = () => {
+    openingTouchStartYRef.current = null;
+    setIsOpeningGesture(false);
+    setHasPulledPastClosedTabHeight(false);
+  };
+
+  const handleGestureEnd = ({
+    shouldResetTouchStart = false,
+  }: { shouldResetTouchStart?: boolean } = {}) => {
+    if (shouldResetTouchStart) {
+      openingTouchStartYRef.current = null;
+    }
+
+    if (!isDrawerOpened) {
+      setIsOpeningGesture(false);
+      scheduleResetPulledPastTimeout();
+    }
+  };
+
   return (
     <Box sx={{ display: { md: 'none' } }}>
-      {/* Sentinel element for intersection observer */}
-      <Box ref={sentinelRef} sx={{ height: 1, visibility: 'hidden' }} />
-
       {/* Drawer Tab */}
       <Box
         ref={closedTabRef}
@@ -141,43 +252,65 @@ const PaymentOverviewDrawer: React.FC<Props> = ({ event, totalPrice, onOpenChang
           left: 0,
           right: 0,
           backgroundColor: (theme) => theme.palette.background.paper,
-          borderTopLeftRadius: 16,
-          borderTopRightRadius: 16,
-          boxShadow: '0 -8px 10px 2px rgba(0,0,0,0.2)',
-          zIndex: 1300,
-          opacity: openDrawer || hasPulledPastClosedTabHeight ? 0 : 1,
-          transform: openDrawer ? 'translateY(8px)' : 'translateY(0)',
-          transition: 'opacity 180ms ease, transform 180ms ease',
+          borderTopLeftRadius: isOpeningGesture || isDrawerOpened ? 0 : 16,
+          borderTopRightRadius: isOpeningGesture || isDrawerOpened ? 0 : 16,
+          boxShadow:
+            isOpeningGesture || isDrawerOpened ? 'none' : '0 -8px 10px 2px rgba(0,0,0,0.2)',
+          zIndex: (theme) => theme.zIndex.drawer + 1,
+          opacity: isDrawerHidden ? 0 : 1,
+          transform: isDrawerHidden ? 'translateY(calc(100% + 12px))' : 'translateY(0)',
+          transition:
+            'opacity 180ms ease, transform 180ms ease, border-radius 120ms ease, box-shadow 120ms ease',
           pointerEvents: 'none',
         }}
       >
-        <Box
-          sx={{
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            width: '100%',
-            py: 1,
-          }}
-        >
+        {!isDrawerOpened && (
           <Box
             sx={{
-              width: 80,
-              height: 6,
-              backgroundColor: (theme) => theme.palette.grey[300],
-              borderRadius: 3,
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              width: '100%',
+              py: 1,
             }}
-          />
-        </Box>
+          >
+            <Box
+              sx={{
+                width: 80,
+                height: 6,
+                backgroundColor: (theme) => theme.palette.grey[300],
+                borderRadius: 3,
+                opacity: isOpeningGesture ? 0 : 1,
+                transition: 'opacity 120ms ease',
+              }}
+            />
+          </Box>
+        )}
         <Box
           role="button"
           aria-label={t('form.labels.payment_overview_open')}
           onClick={toggleDrawer}
+          onTouchStart={(event: React.TouchEvent<HTMLDivElement>) => {
+            handleGestureStart(event.touches[0]?.clientY ?? null);
+          }}
+          onMouseDown={() => {
+            handleGestureStart(null);
+          }}
+          onTouchMove={(event: React.TouchEvent<HTMLDivElement>) => {
+            handleGestureMove(event.touches[0]?.clientY);
+          }}
+          onTouchCancel={handleGestureCancel}
+          onTouchEnd={() => {
+            handleGestureEnd({ shouldResetTouchStart: true });
+          }}
+          onMouseUp={() => {
+            handleGestureEnd();
+          }}
           sx={{
             width: '100%',
             px: 2,
             pb: 2,
-            pointerEvents: openDrawer ? 'none' : 'auto',
+            pointerEvents: isDrawerOpened || isDrawerHidden ? 'none' : 'auto',
             cursor: 'pointer',
           }}
         >
@@ -212,75 +345,51 @@ const PaymentOverviewDrawer: React.FC<Props> = ({ event, totalPrice, onOpenChang
       {/* Drawer Content */}
       <SwipeableDrawer
         anchor="bottom"
-        open={openDrawer}
-        onClose={closeDrawerHandler}
-        onOpen={openDrawerHandler}
+        open={isDrawerOpened}
+        onClose={() => closeDrawerHandler()}
+        onOpen={() => openDrawerHandler()}
         swipeAreaWidth={swipeAreaWidth}
         allowSwipeInChildren
-        disableSwipeToOpen={false}
+        disableSwipeToOpen={isDrawerHidden}
         keepMounted
         SwipeAreaProps={{
           onTouchStart: (event: React.TouchEvent<HTMLDivElement>) => {
-            openingTouchStartYRef.current = event.touches[0]?.clientY ?? null;
-            setIsOpeningGesture(true);
-            setHasPulledPastClosedTabHeight(false);
+            handleGestureStart(event.touches[0]?.clientY ?? null);
           },
           onMouseDown: () => {
-            setIsOpeningGesture(true);
-            setHasPulledPastClosedTabHeight(false);
+            handleGestureStart(null);
           },
           onTouchMove: (event: React.TouchEvent<HTMLDivElement>) => {
-            if (!isOpeningGesture) return;
-
-            const startY = openingTouchStartYRef.current;
-            const currentY = event.touches[0]?.clientY;
-            if (startY === null || typeof currentY !== 'number') return;
-
-            const pullDistance = startY - currentY;
-            const closedTabHeight = closedTabRef.current?.offsetHeight ?? 0;
-            setHasPulledPastClosedTabHeight(closedTabHeight > 0 && pullDistance >= closedTabHeight);
-          },
-          onTouchCancel: () => {
-            openingTouchStartYRef.current = null;
-            setIsOpeningGesture(false);
-            setHasPulledPastClosedTabHeight(false);
+            handleGestureMove(event.touches[0]?.clientY);
           },
+          onTouchCancel: handleGestureCancel,
           onTouchEnd: () => {
-            openingTouchStartYRef.current = null;
-            if (!openDrawer) {
-              setIsOpeningGesture(false);
-              if (resetPulledPastTimeoutRef.current !== null) {
-                window.clearTimeout(resetPulledPastTimeoutRef.current);
-              }
-              resetPulledPastTimeoutRef.current = window.setTimeout(() => {
-                if (!openDrawerRef.current) {
-                  setHasPulledPastClosedTabHeight(false);
-                }
-              }, 180);
-            }
+            handleGestureEnd({ shouldResetTouchStart: true });
           },
           onMouseUp: () => {
-            if (!openDrawer) {
-              setIsOpeningGesture(false);
-              if (resetPulledPastTimeoutRef.current !== null) {
-                window.clearTimeout(resetPulledPastTimeoutRef.current);
-              }
-              resetPulledPastTimeoutRef.current = window.setTimeout(() => {
-                if (!openDrawerRef.current) {
-                  setHasPulledPastClosedTabHeight(false);
-                }
-              }, 180);
-            }
+            handleGestureEnd();
+          },
+        }}
+        sx={{
+          display: { md: 'none' },
+          pointerEvents: isDrawerOpened ? 'none' : 'auto',
+          '& .MuiDrawer-paper': {
+            pointerEvents: 'auto',
+          },
+          '& .MuiSwipeArea-root': {
+            pointerEvents: 'auto',
           },
         }}
-        sx={{ display: { md: 'none' } }}
         ModalProps={{
           disableScrollLock: true,
           keepMounted: false,
+          disableAutoFocus: true,
+          disableRestoreFocus: true,
+          disableEnforceFocus: true,
           BackdropProps: {
-            sx: { background: 'linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%)' },
-            onClick: (event: React.MouseEvent<HTMLDivElement>) => {
-              event.stopPropagation();
+            sx: {
+              background: 'none',
+              pointerEvents: 'none',
             },
           },
         }}
@@ -291,10 +400,11 @@ const PaymentOverviewDrawer: React.FC<Props> = ({ event, totalPrice, onOpenChang
             boxShadow: '0 -8px 10px 2px rgba(0,0,0,0.2)',
             overflow: 'hidden',
             mb:
-              !openDrawer && (isOpeningGesture || hasPulledPastClosedTabHeight)
+              isDrawerOpened ||
+              (!isDrawerOpened && (isOpeningGesture || hasPulledPastClosedTabHeight))
                 ? `${closedTabHeight}px`
                 : 0,
-            transition: 'margin-bottom 120ms ease',
+            transition: 'none',
           },
         }}
       >
@@ -326,7 +436,7 @@ const PaymentOverviewDrawer: React.FC<Props> = ({ event, totalPrice, onOpenChang
             overflow: 'auto',
           }}
         >
-          <PaymentOverviewBox event={event} />
+          <PaymentOverviewBox event={event} hideBuyButton />
         </Box>
       </SwipeableDrawer>
     </Box>

package/src/form/TicketForm.tsx

@@ -3,6 +3,7 @@ import PaymentSuccess from '@form/PaymentSuccess';
 import FormProvider, { RHFCheckbox } from '@components/hook-form';
 import {
   Box,
+  Divider,
   Grid,
   Link,
   LinkProps,
@@ -52,7 +53,6 @@ import useErrors from '@hooks/useErrors';
 import { EventType } from '@utils/data/event';
 import TimeslotSelection from '@form/TimeslotSelection';
 import useGlobal from '@hooks/useGlobal';
-import useConsentScrollOnDrawerOpen from '@hooks/useConsentScrollOnDrawerOpen';
 import useScrollToFirstError from '@hooks/useScrollToFirstError';
 import { Trans } from '@components/Trans';
 import { EVENTLOOK_ORDER_FORM_ID, EVENTLOOK_ORDER_FORM_CONTAINER_ID } from '@utils/data/global.ts';
@@ -115,11 +115,6 @@ const TicketForm: React.FC<Props> = ({
   const hasFiredPaymentMethod = useRef(false);
   const termsAndConditionsRef = useRef<HTMLDivElement | null>(null);
 
-  useConsentScrollOnDrawerOpen({
-    isDrawerOpen: isPaymentOverviewDrawerOpen,
-    consentRef: termsAndConditionsRef,
-  });
-
   const item: IEcommerce = {
     currency: event.currency,
     items: [
@@ -693,14 +688,18 @@ const TicketForm: React.FC<Props> = ({
                 />
               </Stack>
             </Grid>
-            <Grid item xs={12} md={4} sx={{ display: { xs: 'none', md: 'block' } }}>
-              <PaymentOverviewBox event={event} />
+            <Grid item xs={12} sx={{ display: { xs: 'block', md: 'none' } }}>
+              <Divider sx={{ borderStyle: 'dashed' }} />
+            </Grid>
+            <Grid item xs={12} md={4} mt={{ xs: 0, md: 0 }}>
+              <PaymentOverviewBox event={event} withoutPadding />
             </Grid>
           </Grid>
 
           <PaymentOverviewDrawer
             event={event}
             totalPrice={values.total}
+            termsAndConditionsRef={termsAndConditionsRef}
             onOpenChange={setIsPaymentOverviewDrawerOpen}
           />
 

package/src/form/merchandise/MerchandiseSlider.tsx

@@ -21,7 +21,7 @@ const MerchandiseSlider: React.FC<Props> = ({ eventProducts, eventId, sx }) => {
         sx={{
           overflow: 'hidden',
           padding: theme.spacing(8, 3),
-          margin: theme.spacing(-8, -3),
+          margin: theme.spacing(-8, -2.5),
         }}
       >
         <Box ref={emblaRef} className="embla" sx={{ overflow: 'visible' }}>

package/src/form/product/ProductVariantsDialog.tsx

@@ -294,6 +294,7 @@ const ProductVariantsDialog: React.FC<Props> = ({
                       <Button
                         variant="outlined"
                         onClick={() => handleRemoveQuantity(variant)}
+                        aria-label={t('components.product_variant_dialog.decrease_quantity')}
                         disabled={draftQty < 1}
                         sx={{
                           minWidth: 0,
@@ -328,6 +329,7 @@ const ProductVariantsDialog: React.FC<Props> = ({
                         <Button
                           variant="contained"
                           onClick={() => handleAddQuantity(variant)}
+                          aria-label={t('components.product_variant_dialog.increase_quantity')}
                           disabled={draftQty >= 10 || draftQty >= maxAvailable}
                           sx={{ minWidth: 0, height: 36, borderRadius: 1, fontWeight: 700 }}
                         >

package/src/form/style.ts

@@ -5,6 +5,12 @@ export const OverviewCard = styled(Card)<{ stickyHeaderTop: number }>(
   ({ theme, stickyHeaderTop }) => ({
     position: 'sticky',
     top: stickyHeaderTop,
+    borderRadius: theme.spacing(2),
+
+    [theme.breakpoints.down('sm')]: {
+      borderRadius: theme.spacing(1),
+      boxShadow: 'none',
+    },
   })
 );
 

package/src/form/tickets/TicketQuantityControl.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Box, Button, IconButton, Stack } from '@mui/material';
 import { Iconify } from '@components/iconify';
+import useGlobal from '@hooks/useGlobal';
 
 interface TicketQuantityControlProps {
   quantity: number;
@@ -23,11 +24,14 @@ const TicketQuantityControl: React.FC<TicketQuantityControlProps> = ({
   onIncrement,
   onAddFirst,
 }) => {
+  const { t } = useGlobal();
+
   if (quantity > 0) {
     return (
       <Stack direction="row" spacing={{ xs: 0.5, md: 1 }} alignItems="center">
         <IconButton
           onClick={onDecrement}
+          aria-label={t('form.labels.ticket_quantity_decrease')}
           disabled={isDisabled || quantity <= 0}
           sx={{
             width: { xs: 36, md: 40 },
@@ -56,6 +60,7 @@ const TicketQuantityControl: React.FC<TicketQuantityControlProps> = ({
         </Box>
         <IconButton
           onClick={onIncrement}
+          aria-label={t('form.labels.ticket_quantity_increase')}
           disabled={isDisabled || !canAddMore}
           sx={{
             width: { xs: 36, md: 40 },
@@ -76,6 +81,7 @@ const TicketQuantityControl: React.FC<TicketQuantityControlProps> = ({
     <Button
       variant="contained"
       onClick={onAddFirst}
+      aria-label={addLabel}
       disabled={isDisabled || !canAddFirst}
       sx={{
         height: { xs: 36, md: 40 },

package/src/hooks/useScrollToFirstError.ts

@@ -53,22 +53,23 @@ const getFirstError = <T extends FieldValues>(
   return null;
 };
 
-const escapeSelectorValue = (value: string) => {
+const escapeSelectorValue = (value: string): string => {
   if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') {
     return CSS.escape(value);
   }
 
-  return value.replace(/"/g, '\\"');
+  // Fallback: escape all CSS special characters manually
+  return value.replace(/([!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~])/g, '\\$1');
 };
 
 type ScrollToFirstErrorMethods<T extends FieldValues> = Pick<
-  UseFormReturn<T, any, any>,
+  UseFormReturn<T, object, undefined>,
   'setFocus'
 >;
 
-export default function useScrollToFirstError<T extends FieldValues>(
-  methods: ScrollToFirstErrorMethods<T>
-) {
+export default function useScrollToFirstError<T extends FieldValues>({
+  setFocus,
+}: ScrollToFirstErrorMethods<T>) {
   return useCallback(
     (errors: FieldErrors<T>) => {
       const firstError = getFirstError(errors);
@@ -76,19 +77,23 @@ export default function useScrollToFirstError<T extends FieldValues>(
         return;
       }
 
-      methods.setFocus(firstError.name);
-
+      // Re-query the DOM instead of relying on potentially stale refs
+      const fieldName = String(firstError.name);
       const scrollTarget =
-        firstError.ref ||
-        document.querySelector<HTMLElement>(
-          `[name="${escapeSelectorValue(String(firstError.name))}"]`
-        );
+        document.querySelector<HTMLElement>(`[name="${escapeSelectorValue(fieldName)}"]`) ||
+        document.getElementById(fieldName);
 
-      scrollTarget?.scrollIntoView({
-        behavior: 'smooth',
-        block: 'center',
-      });
+      if (scrollTarget) {
+        scrollTarget.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center',
+        });
+        scrollTarget.focus({ preventScroll: true });
+      } else {
+        // Fallback to RHF's setFocus if no DOM element found
+        setFocus(firstError.name);
+      }
     },
-    [methods]
+    [setFocus]
   );
 }