fix: scroll to required fields on support form submit (#49147)

Fixes FE-4130. 

## What is the current behavior?

When submitting the support form with required fields missing, the form
does not scroll to or focus the required empty field. Users have to
manually find which field they missed.

## What is the new behavior?

On submit, the form automatically scrolls to and focuses the first
required field that's missing a value - including "What issue are you
having?" and "Which library are you having issues with?".

## Additional context

The scroll wasn't working due to a Chrome bug where scrollIntoView is
blocked when overflow-x: hidden and overflow-y: auto are on the same
element (the sidebar scroll container). The fix manually walks the DOM
to find the scrollable parent and calls scrollTo() directly. Dropdown
fields (Radix Selects) were also unfindable via the usual name
attribute, so data-support-field attributes are used as a stable DOM
hook for those.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Bug Fixes

* Improved support form validation by automatically scrolling to the
first invalid or missing required field.
* Added smooth scrolling and focus behavior to help users quickly
correct form errors.
* Ensured the client library field is brought into view when required
information is missing.
* Improved field targeting for category and client library validation
messages.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Ali Waseem <waseema393@gmail.com>

apps/studio/components/interfaces/Support/CategoryAndSeverityInfo.tsx

@@ -91,7 +91,11 @@ function CategorySelector({ form }: CategorySelectorProps) {
           <FormItemLayout hideMessage layout="vertical" label="What issue are you having?">
             <FormControl>
               <Select {...fieldWithoutRef} defaultValue={field.value} onValueChange={onValueChange}>
-                <SelectTrigger aria-label="Select an issue" className="w-full">
+                <SelectTrigger
+                  data-support-field="category"
+                  aria-label="Select an issue"
+                  className="w-full"
+                >
                   <SelectValue placeholder="Select an issue">
                     {field.value
                       ? CATEGORY_OPTIONS.find((o) => o.value === field.value)?.label

apps/studio/components/interfaces/Support/ClientLibraryInfo.tsx

@@ -43,7 +43,11 @@ export function ClientLibraryInfo({ form, category, library }: ClientLibraryInfo
           <FormItemLayout layout="vertical" label="Which library are you having issues with">
             <FormControl>
               <Select {...field} defaultValue={field.value} onValueChange={field.onChange}>
-                <SelectTrigger className="w-full" aria-label="Select a library">
+                <SelectTrigger
+                  data-support-field="library"
+                  className="w-full"
+                  aria-label="Select a library"
+                >
                   <SelectValue placeholder="Select a library" />
                 </SelectTrigger>
                 <SelectContent>

apps/studio/components/interfaces/Support/SupportForm.utils.tsx

@@ -224,3 +224,34 @@ export async function selectInitialOrgAndProject({
     orgSlug: orgs[0]?.slug ?? null,
   }
 }
+
+// Chrome blocks scrollIntoView (triggered by .focus()) when overflow-x: hidden and
+// overflow-y: auto are on the same element. Manually scroll the sidebar instead.
+export function scrollToRequiredField(formId: string, fieldName: string) {
+  const form = document.getElementById(formId)
+  if (!form) return
+
+  // Selects use data-support-field since they have no name attr; inputs/textareas use name.
+  const el =
+    form.querySelector(`[data-support-field="${fieldName}"]`) ??
+    form.querySelector(`[name="${fieldName}"]`)
+  if (!(el instanceof HTMLElement)) return
+
+  const scrollContainer = findScrollableParent(el)
+  if (scrollContainer) {
+    const offset = el.getBoundingClientRect().top - scrollContainer.getBoundingClientRect().top - 80
+    scrollContainer.scrollTo({ top: scrollContainer.scrollTop + offset, behavior: 'smooth' })
+  }
+
+  el.focus({ preventScroll: true })
+}
+
+function findScrollableParent(el: HTMLElement): HTMLElement | null {
+  let parent = el.parentElement
+  while (parent && parent !== document.body) {
+    const { overflowY } = window.getComputedStyle(parent)
+    if (overflowY === 'auto' || overflowY === 'scroll') return parent
+    parent = parent.parentElement
+  }
+  return null
+}

apps/studio/components/interfaces/Support/SupportFormV3.tsx

@@ -36,6 +36,7 @@ import {
   getOrgSubscriptionPlan,
   NO_ORG_MARKER,
   NO_PROJECT_MARKER,
+  scrollToRequiredField,
 } from './SupportForm.utils'
 import { SupportFormDirectEmailContent } from './SupportFormDirectEmailInfo'
 import { getProjectAuthConfig } from '@/data/auth/auth-config-query'
@@ -148,6 +149,8 @@ export const SupportFormV3 = ({
         type: 'manual',
         message: "Please select the library that you're facing issues with",
       })
+      // setError triggers a re-render; wait for it before querying aria-invalid
+      requestAnimationFrame(() => scrollToRequiredField('support-form', 'library'))
       return
     }
 
@@ -223,7 +226,9 @@ export const SupportFormV3 = ({
     submitSupportTicket(payload)
   }
 
-  const handleFormSubmit = form.handleSubmit(onSubmit)
+  const handleFormSubmit = form.handleSubmit(onSubmit, (errors) => {
+    scrollToRequiredField('support-form', Object.keys(errors)[0])
+  })
 
   const handleSubmitButtonClick: MouseEventHandler<HTMLButtonElement> = (event) => {
     handleFormSubmit(event)