Skip to content

menuShouldScrollIntoView does not scroll all menu into view #4615

Open

Description

@fyodor-e

React-select with menuShouldScrollIntoView set to true does not scrolled into view properly.
Although menu is scrolled into view, last options are still invisible.

On the screenshot below, only option 1 to 4 is visible and options 5 and 6 are not. Parent size is expanded to accommodate full menu and parent can be scrolled manually to see full menu.

image

Sandbox is here https://codesandbox.io/s/reactselectscrollintoview-44b7n

To reproduce:

  1. Make sure, that react select is located at the very bottom of the window, Just above the footer. There should be no empty space between react-select and footer. (it may be required to decrease browser window size)
  2. Open react-select.
  3. Observe, that although container has been scrolled down, it is not scrolled down enough to include all options. To see last options, manual scrolling of the container is required.

Expected result: container is scrolled to accommodate all options.

Also, if header and footer will not be present, parent will be scrolled properly.

Activity

  1. added
    menu-bugAddresses menu positioning, scrolling, or general interactions
    on Jun 10, 2021
  2. ChristianCastillejo commented on Jun 16, 2021

    @ChristianCastillejo

    You can check this solution.
    Hope it works for you 💚

  3. luizpaulo165 commented on Sep 23, 2021

    @luizpaulo165

    You can check this solution.
    Hope it works for you 💚

    Work for me! Thank you!

  4. irshatharis commented on Oct 10, 2024

    @irshatharis

    For the future people.
    menuShouldScrollIntoView doesn't always work, especially if there is a re-render. To fix this, memoize the value and options props when adding menuShouldScrollIntoView.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    issue/bug-confirmedIssues about a bug that has been confirmed by a maintainermenu-bugAddresses menu positioning, scrolling, or general interactions

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions