Commit Graph
11 Commits
Author SHA1 Message Date
f5d0bf5d98 fix(ui): let command dropdowns scroll on touch inside overlays (#50103)
## What kind of change does this PR introduce?

Bug fix.

## What is the current behavior?

A command dropdown cannot be scrolled by touch when it sits inside a
dialog or sheet.

Radix wraps a modal dialog's overlay in a scroll lock that cancels wheel
and touch events whose target is not inside the sheet. A dropdown
portals to the body, so it falls outside that boundary and its scroll
events get cancelled.

Callers have been rediscovering this one at a time and fixing only half
of it. `MultiSelectorList` stops wheel events reaching the document, and
`SchemaSelector` and `FunctionSelector` expose a `stopScrollPropagation`
prop that does the same. None of them handle touch, so the desktop
symptom is fixed everywhere and the mobile one is fixed nowhere.

## What is the new behavior?

`CommandList` keeps wheel and touch events off the document itself. That
covers every command dropdown in the monorepo, in an overlay or not,
with no call-site changes. A caller's own `onWheel` or `onTouchMove`
still runs.

The workarounds this replaces are removed: the handler in
`MultiSelectorList`, and the `stopScrollPropagation` prop on
`SchemaSelector` and `FunctionSelector` along with its four call sites.

One behavior change worth naming: overscrolling past the end of a
dropdown no longer scrolls the page behind it. That is what a dropdown
should do, and it is what the four `stopScrollPropagation` call sites
were already opting into.

#50072 depends on this. It swaps two selects for comboboxes, and Radix
Select brings its own scroll lock, so without this the swap would
regress touch scrolling.

## To test

- On the deploy preview, [open a project's Connect
sheet](https://studio-staging-git-dnywh-fix-multi-select-scrol-63608b-supabase.vercel.app/dashboard/project/_)
and pick the MCP tab.
- Narrow the window to phone width and switch on touch emulation in
devtools.
- Open the features dropdown and drag the list. It should scroll, and
the sheet behind it should stay put.
- Repeat with a mouse wheel to confirm desktop scrolling still works.
- [Open Authentication >
Hooks](https://studio-staging-git-dnywh-fix-multi-select-scrol-63608b-supabase.vercel.app/dashboard/project/_/auth/hooks)
> Create hook, open the schema picker, and confirm it still scrolls by
wheel now that `stopScrollPropagation` is gone.
- [Open the SQL
editor](https://studio-staging-git-dnywh-fix-multi-select-scrol-63608b-supabase.vercel.app/dashboard/project/_/sql/new)'s
schema picker on a page with no overlay and confirm the list scrolls
normally.


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

- **Bug Fixes**
- Improved wheel and touch scrolling behavior in command lists,
selectors, and multi-select menus.
- Reduced unwanted scroll-lock interference when using selectors inside
overlays such as dialogs and sheets.
  - Preserved support for supplied scroll event callbacks.

- **Accessibility**
- Added clearer accessible labels to the Connect and mobile navigation
menu buttons.
- Updated the Connect button text behavior for icon-only and standard
presentations.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-09-08 19:21:19 +08:00
Joshen Lim fcfb0f0222 Refactor all usage of form.watch to either useWatch or subscribe (#48436)
## Context

Replaces all usage of `form.watch()` to use `useWatch` instead + follows
the "name what you watch" convention as specified in the react-hook-form
skills.

There's also a small refactor in `SmtpForm.tsx` which removes the
unnecessary use of a `useState` to track if SMTP is enabled or not

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

* **Improvements**
* Updated many Studio forms to watch specific fields more precisely,
improving live UI updates for previews, warnings, conditional sections,
and validation messages.
* Enhanced responsiveness across settings, authentication, billing,
storage, integrations, and support flows while keeping save/update
behavior the same.
* **Refined Experiences**
* Improved the analytics table creation flow with tighter, enum-based
column type validation and structured, type-specific column options.
* **Preserved Behavior**
* Maintained existing permission checks, submission flows, and
account-management workflows.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-07-30 11:45:40 +08:00
Gildas Garcia c6fc456910 chore: cleanup duplicate exports studio (#47387)
## Problem

Knip reports many duplicate exports (both named and default). Besides,
we're moving away from default exports and even have an eslint rule to
enforce it on new code.

## Solution

- Cleanup those exports
- Update imports when necessary

No functional changes. If it builds, it's fine
2026-06-29 15:46:16 +02:00
Gildas Garcia 0facd341a6 chore: remove UI form components _Shadcn_ suffix (#45212)
## Problem

We used to have a `_Shadcn_` suffix for all the shadcn form components
because we also had `formik` form components.
This is not needed anymore.

## Solution

- Remove the suffix
- Update all usages
2026-04-24 12:14:15 +02:00
4a0bb36ca8 style: require sorted imports in studio/components (#44408)
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2026-04-01 10:22:37 +02:00
Vaibhav 1604baaca5 fix: cron integration form (#44181)
## TL;DR

Fixes the scroll behavior for both dropdowns in the database function
within the new job form

## Before


https://github.com/user-attachments/assets/92ad6bec-1c26-4759-b85a-b81aa8a938dc

## After


https://github.com/user-attachments/assets/fd34c54e-d9b1-46aa-9252-fa765d9f2a3f



## Related
- closes https://github.com/supabase/supabase/issues/44146
2026-03-25 06:26:29 -06:00
Joshen Lim c6b2fe6fee Popover ui component to use portal by default, remove all manual declaration of portal for PopoverContent in dashboard (#41818)
* Popover ui component to use portal by default, remove all manual declaration of portal for PopoverContent in dashboard

* Forgot to add ui changes lol

* Clean uop
2026-01-20 11:58:31 +08:00
Joshen Lim 426fda2ebc Address circular dependencies across multiple files (#39231)
* Address circular dependencies across multiple files

* Fix TS
2025-10-06 11:01:56 +08:00
Jordi EnricandTerry Sutton 792e2316f0 fix schema selector in create fn sheet (#36141)
* fix schema selector in create fn sheet

* fix schemaselctor in auth hook

* add portal false to schemaselector in sqlfunction for cronjobs

* Fix schema selector in function sheet

---------

Co-authored-by: Terry Sutton <saltcod@gmail.com>
2025-06-03 09:26:13 -02:30
Terry SuttonandIvan Vasilov 9edc5f500e Shorter select widths (#30871)
* Shorter select widths

* Fix the width of the database function selects.

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2024-12-04 10:17:51 +01:00
Terry Sutton b6de81485c new Integrations page (#29671)
* Start new integrations page

* Move cronjobs into integrations

* Rearrange

* Remove duplicate

* Move around menu items
2024-10-22 09:39:36 -02:30