Skip to content

Catalyst Dialog closes when dragging the browser scrollbar (outside click triggered) #1805

@gencher

Description

@gencher

Component (if applicable)

Describe the bug
In the “With scrolling content” Dialog example, clicking/dragging the browser/page scrollbar while the dialog is open causes the dialog to close. It looks like the scrollbar interaction is being treated as an outside click and triggers onClose.

To Reproduce

  1. Go to https://catalyst.tailwindui.com/docs/dialog#with-scrolling-content
  2. Open the “Terms and conditions” dialog
  3. Instead of scrolling inside the dialog, click and drag the browser’s right scrollbar (page scrollbar)
  4. Release the mouse → the dialog closes

Expected behavior
Dragging/clicking the browser/page scrollbar should not close the dialog. Only an intentional outside click (on the backdrop) or Escape should close it.

Actual behavior
Dialog closes on scrollbar drag/release, as if an outside click happened.

Browser/Device

  • OS: macOS
  • Browser: Firefox

Additional context
We are using the Catalyst template in our app as well, and we can reproduce the exact same behavior there (Headless UI Dialog). So this is not only the docs site — it affects real Catalyst-based apps too.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions