Skip to content

Select and MultiSelect dropdown flips unexpectedly after version 8.2.3 #8194

@dragos-tcsa

Description

@dragos-tcsa

Dependencies check up

  • I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

8.2.5

What package has an issue?

@mantine/core

What framework do you use?

Vite

In which browsers you can reproduce the issue?

Not applicable – issue is not related to the browser

Describe the bug

Description:

Select and MultiSelect components have an issue with the dropdown position after version 8.2.3. If the flip middleware is set to true (its default behavior, or explicitly with comboboxProps={{ middlewares: { flip: true } }}) and the dropdown height is greater than the distance between the Select or MultiSelect input and the bottom of the window, the dropdown changes from top to bottom after the second time it is opened.

Steps to reproduce:

  1. Use a Select or MultiSelect component with a @mantine/core version 8.2.3 or later.
    It's also reproducible on the Mantine website on the Select component page and the MultiSelect component page.
  2. Place the component near the bottom of the window so there is not enough space for the dropdown.
  3. Open the dropdown. As expected, the dropdown appears above the input.
  4. Close the dropdown.
  5. Open it again. The dropdown appears on top of the selector for a split second, then the position changes to the bottom of the selector.
  6. Repeating this toggles the dropdown between top and bottom on each open.

Expected behavior:

The dropdown should stay on top unless there is enough space below the input to display it fully.

If possible, include a link to a codesandbox with a minimal reproduction

No response

Possible fix

No response

Self-service

  • I would be willing to implement a fix for this issue

Metadata

Metadata

Assignees

No one assigned

    Labels

    FixedCompleted issues that will be published with next patch (1.0.X)

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions