Refactor: enhance useScrollToErrorOnSubmit hook with TypeScript types and memoization

- Updated methods parameter in UseScrollToErrorOnSubmitOptions to use FieldValues for better type safety.
- Improved memoization of scroll options to prevent unnecessary re-renders.
- Adjusted condition for handling server-side validation errors on mount to ensure proper functionality.

Author: jaruesink

packages/components/src/remix-hook-form/hooks/useScrollToErrorOnSubmit.ts

@@ -1,4 +1,5 @@
 import { useEffect, useMemo } from 'react';
+import type { FieldValues } from 'react-hook-form';
 import { useRemixFormContext } from 'remix-hook-form';
 import type { UseRemixFormReturn } from 'remix-hook-form';
 import { type ScrollToErrorOptions, scrollToFirstError } from '../../utils/scrollToError';
@@ -8,34 +9,39 @@ export interface UseScrollToErrorOnSubmitOptions extends ScrollToErrorOptions {
   enabled?: boolean;
   scrollOnServerErrors?: boolean;
   scrollOnMount?: boolean;
-  methods?: UseRemixFormReturn<any>; // Optional methods parameter
+  methods?: UseRemixFormReturn<FieldValues>; // Optional methods parameter
 }
 
 export const useScrollToErrorOnSubmit = (options: UseScrollToErrorOnSubmitOptions = {}) => {
   // Use provided methods or fall back to context
   const contextMethods = useRemixFormContext();
-  const { methods, delay = 100, enabled = true, scrollOnServerErrors = true, scrollOnMount = true, ...scrollOptions } = options;
+  const {
+    methods,
+    delay = 100,
+    enabled = true,
+    scrollOnServerErrors = true,
+    scrollOnMount = true,
+    ...scrollOptions
+  } = options;
   const formMethods = methods || contextMethods;
-  
-  // Early return if no form methods are available
-  if (!formMethods) {
-    console.warn('useScrollToErrorOnSubmit: No form methods available. Make sure you are either inside a RemixFormProvider or passing methods explicitly.');
-    return;
-  }
-  
+
   const { formState } = formMethods;
 
   // Memoize scroll options to prevent unnecessary re-renders
+  const { behavior, block, inline, offset, shouldFocus, retryAttempts, selectors } = scrollOptions;
+
+  // biome-ignore lint: Compare `selectors` by value via join to avoid unstable array identity.
   const memoizedScrollOptions = useMemo(
-    () => scrollOptions,
-    [
-      scrollOptions.behavior,
-      scrollOptions.block,
-      scrollOptions.inline,
-      scrollOptions.offset,
-      scrollOptions.shouldFocus,
-      scrollOptions.retryAttempts,
-    ],
+    () => ({
+      behavior,
+      block,
+      inline,
+      offset,
+      shouldFocus,
+      retryAttempts,
+      selectors,
+    }),
+    [behavior, block, inline, offset, shouldFocus, retryAttempts, selectors?.join(',')],
   );
 
   // Handle form submission errors
@@ -55,7 +61,7 @@ export const useScrollToErrorOnSubmit = (options: UseScrollToErrorOnSubmitOption
 
   // Handle server-side validation errors on mount (Remix SSR)
   useEffect(() => {
-    if (!(enabled && scrollOnMount) || !scrollOnServerErrors) return;
+    if (!(enabled && scrollOnMount && scrollOnServerErrors)) return;
     const hasErrors = Object.keys(formState.errors).length > 0;
 
     if (hasErrors && !formState.isSubmitting) {

packages/components/src/utils/scrollToError.ts

@@ -7,8 +7,14 @@ export interface ScrollToErrorOptions {
   offset?: number;
   shouldFocus?: boolean;
   retryAttempts?: number;
+  selectors?: string[];
 }
 
+const DEFAULT_ERROR_SELECTORS = [
+  '[data-slot="form-message"]', // Target error message first (best UX)
+  '[data-slot="form-control"][aria-invalid="true"]', // Input with error state
+];
+
 const findFirstErrorElement = (selectors: string[]): HTMLElement | null => {
   for (const selector of selectors) {
     const element = document.querySelector(selector) as HTMLElement;
@@ -36,18 +42,19 @@ const focusElement = (element: HTMLElement, shouldFocus: boolean, behavior: Scro
 };
 
 export const scrollToFirstError = (errors: FieldErrors, options: ScrollToErrorOptions = {}) => {
-  const { behavior = 'smooth', offset = 80, shouldFocus = true, retryAttempts = 3 } = options;
+  const {
+    behavior = 'smooth',
+    offset = 80,
+    shouldFocus = true,
+    retryAttempts = 3,
+    selectors = DEFAULT_ERROR_SELECTORS,
+  } = options;
 
   if (Object.keys(errors).length === 0) return false;
 
   const attemptScroll = (attempt = 0): boolean => {
-    // Use existing data-slot selectors - no new attributes needed!
-    const selectors = [
-      '[data-slot="form-message"]', // Target error message first (best UX)
-      '[data-slot="form-control"][aria-invalid="true"]', // Input with error state
-    ];
-
-    const element = findFirstErrorElement(selectors);
+    const selectorList = selectors.length > 0 ? selectors : DEFAULT_ERROR_SELECTORS;
+    const element = findFirstErrorElement(selectorList);
     if (element) {
       scrollToElement(element, offset, behavior);
       focusElement(element, shouldFocus, behavior);