mirror of
https://github.com/supabase/supabase.git
synced 2026-10-13 05:09:12 +03:00
Monica KhouryandAli Waseem
fff5928056
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>
Writing components
Where to create your components
- For components that declare the general structure and layout of a page:
/components/layouts/xxx
- For components that are tightly coupled to a specific interface:
/components/interfaces/xxx
- For components that are meant to be reusable across multiple pages:
/components/ui/xxx
- Note: We're gradually moving files out of the
to-be-cleanedfolder into the respective folders as we refactor
Component structure
- If a component has constants and utility methods that are tightly coupled to itself, keep them close to the component and enclose them in a folder with an
index.tsxas an entry point - Otherwise it can just be a file on its own
- For example:
-
components/ui - SampleComponentA - SampleComponentA.tsx - SampleComponentA.constants.ts - SampleComponentA.utils.ts - SampleComponentA.types.ts - index.ts - SampleComponentB.tsx
-
Template for building components
// Declare the prop types of your component
interface ComponentAProps {
sampleProp: string
}
// Name your component accordingly — use a named export, not a default export
export const ComponentA = ({ sampleProp }: ComponentAProps) => {
return <div>ComponentA: {sampleProp}</div>
}