Skip to content

[AlertDialog] forceMount causes document body scroll-locked even when AlertDialog is closed #3100

@seedy

Description

@seedy

Bug report

Current Behavior

I want to animate AlertDialog entering and closing, therefore I was planning on using forceMount prop.

Document body is scroll-locked when applying forceMount to AlertDialog's Portal sub-component, even when the dialog is closed.

Screenshot 2024-09-04 at 12 50 08

Screenshot 2024-09-04 at 12 46 27
Screenshot 2024-09-04 at 12 46 13

Removing forceMount from Portal successfully fixed the behaviour, therefore I'm convinced there's an issue between forceMount and scroll-locking behaviours.

Expected behavior

Document body should not be scroll-locked when the AlertDialog is in closed state.

Reproducible example

Codesandbox repro

Suggested solution

Conditionally apply the scroll-locked behavior on open, instead of on mount of AlertDialog.

Additional context

Your environment

Software Name(s) Version
Radix Package(s) @radix-ui/react-alert-dialog 1.1.1
React n/a
Browser n/a
Assistive tech n/a
Node n/a
npm/yarn n/a
Operating System n/a

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