From fff592805662fbe6d8f9da269cbdfd117851d76e Mon Sep 17 00:00:00 2001
From: Monica Khoury <99693443+monicakh@users.noreply.github.com>
Date: Tue, 18 Aug 2026 15:27:01 +0300
Subject: [PATCH] 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>
---
 .../Support/CategoryAndSeverityInfo.tsx       |  6 +++-
 .../interfaces/Support/ClientLibraryInfo.tsx  |  6 +++-
 .../interfaces/Support/SupportForm.utils.tsx  | 31 +++++++++++++++++++
 .../interfaces/Support/SupportFormV3.tsx      |  7 ++++-
 4 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/apps/studio/components/interfaces/Support/CategoryAndSeverityInfo.tsx b/apps/studio/components/interfaces/Support/CategoryAndSeverityInfo.tsx
index b1806a24497..843bbedc875 100644
--- a/apps/studio/components/interfaces/Support/CategoryAndSeverityInfo.tsx
+++ b/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
diff --git a/apps/studio/components/interfaces/Support/ClientLibraryInfo.tsx b/apps/studio/components/interfaces/Support/ClientLibraryInfo.tsx
index 43a644c0fc0..e60259a8f7f 100644
--- a/apps/studio/components/interfaces/Support/ClientLibraryInfo.tsx
+++ b/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>
diff --git a/apps/studio/components/interfaces/Support/SupportForm.utils.tsx b/apps/studio/components/interfaces/Support/SupportForm.utils.tsx
index b072b3f5fc1..6a7ecbb705d 100644
--- a/apps/studio/components/interfaces/Support/SupportForm.utils.tsx
+++ b/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
+}
diff --git a/apps/studio/components/interfaces/Support/SupportFormV3.tsx b/apps/studio/components/interfaces/Support/SupportFormV3.tsx
index 764dc5959eb..d3d86d97e68 100644
--- a/apps/studio/components/interfaces/Support/SupportFormV3.tsx
+++ b/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)