Skip to content

[select] Opening/closing popup doesn't show animation #2289

@Studio384

Description

@Studio384

Bug report

Current behavior

The menu should animate in and out.

Expected behavior

The select menu does not animate in or out, despite classes being applied that imply that it should (I assume it should animate similarly to the Menu component's dropdown).

<Select.Popup className="group max-h-[var(--available-height)] origin-[var(--transform-origin)] overflow-y-auto rounded-md bg-[canvas] py-1 text-gray-900 shadow-lg shadow-gray-200 outline outline-1 outline-gray-200 transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[ending-style]:transition-none data-[starting-style]:scale-90 data-[starting-style]:opacity-0 data-[side=none]:data-[starting-style]:scale-100 data-[side=none]:data-[starting-style]:opacity-100 data-[side=none]:data-[starting-style]:transition-none dark:shadow-none dark:-outline-offset-1 dark:outline-gray-300">

What is happening now:
https://github.com/user-attachments/assets/1b46fe69-ee3a-4169-8906-81a148c56fa9

Reproducible example

Link to a CodeSandbox, StackBlitz, or other IDE.

  1. Go to the Select demo.
  2. Open the menu

Base UI version

For example v1.0.0-beta.1

Which browser are you using?

Both the latest Edge and Firefox

Which OS are you using?

Windows 11 24H2

Which assistive tech are you using (if applicable)?

Voiceover/JAWS etc.

Additional context

Provide any additional context that might help us identify the problem and find a solution.

Metadata

Metadata

Assignees

No one assigned

    Labels

    component: selectstatus: expected behaviorDoes not imply the behavior is intended. Just that we know about it and can't work around it

    Projects

    Status

    No status

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions