Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Multiselect menu jumps to the top everytime an option is selected #3488

Open
YKdenis opened this issue Mar 27, 2019 · 3 comments
Open

Multiselect menu jumps to the top everytime an option is selected #3488

YKdenis opened this issue Mar 27, 2019 · 3 comments
Labels
issue/bug-unconfirmed Issues that describe a bug that hasn't been confirmed by a maintainer yet issue/reviewed Issue has recently been reviewed (mid-2020)

Comments

@YKdenis
Copy link

YKdenis commented Mar 27, 2019

Hey I'm trying to create a multiselect in v2 and navigate through the options with my arrow keys. Everytime I select an option it jumps back to the top. It doesn't keep the state of the selected value. This is a feature that is in v1 but apparently isn't in v2?

v1 example: https://codesandbox.io/s/ql5y173xx6
v2 example: https://codesandbox.io/s/5wvq595xnn

@KevinDenys
Copy link

I'm also having this issue is there a fix for this?

@joachimjonkers
Copy link

same here! a fix would be much appreciated.

@bladey bladey added the issue/bug-unconfirmed Issues that describe a bug that hasn't been confirmed by a maintainer yet label May 29, 2020
@bladey bladey added the issue/reviewed Issue has recently been reviewed (mid-2020) label Jun 17, 2020
@Nokel81
Copy link

Nokel81 commented Sep 16, 2020

I can confirm that this does still happen in v3.1.0.

Having done some more research into when this happens (since it doesn't always seem to happen) I have noticed the following:

  1. If controlShouldRenderValue={false} and you change the placeholder then it is guaranteed to jump. This seems to be because if the placeholder is re-rendered then the entire react component is re-rendered. Thus the jumping.
  2. If values are supplied then the jumping happens as well.

Both of these were observed while using mobx. Then having done some more research. The problem seams to lie within mobx's or React's realm because of no having enough @computed fields. React seems to aggressively want to re-render items. I would suggest adding those annotations if you are using mobx.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
issue/bug-unconfirmed Issues that describe a bug that hasn't been confirmed by a maintainer yet issue/reviewed Issue has recently been reviewed (mid-2020)
Projects
None yet
Development

No branches or pull requests

5 participants