Blueprint: MultiSelect dropdown scrolls to top after making a selection

[aniov]

Environment

• __Package version(s)__: 3.8.1
• __Browser and OS versions__: Chrome

Steps to reproduce

1. Use MultiSelect component, scroll down and select an item.

Actual behavior

After each selection the list is auto scrolled up.

Expected behavior

After each selection the list should stay in same position.
This was working this way in version 3.8.0

[adidahiya]

Good catch, I can confirm this is a regression in @blueprintjs/select 3.8.1. The 3.8.0 behavior is viewable here.

Caused by https://github.com/palantir/blueprint/pull/3496 (cc @rhysbrettbowen)

[rhysbrettbowen]

Looks like changing https://github.com/rhysbrettbowen/blueprint/blob/695e3239a0cc339d91aabd51fb486e07d9ac833a/packages/select/src/components/query-list/queryList.tsx#L381 from true to false should fix?

Does this happen when resetOnQuery is false?

Otherwise technically it should be scrolling to the top, as the query is reset and so the active item is also....

[pzi]

Does this happen when resetOnQuery is false?

Can confirm it does happen when it is false and it's quite frustrating as I have a large MultiSelect option set 😢.

[grancalavera]

@rhysbrettbowen @pzi one way to mitigate this is to set activeItem. At the moment we're using a useState hook to keep the active item fresh. It takes a bit of tinkering, since you need to keep track of when you may need to reset activeItem to undefined, for example, when the menu overlay closes, so that the next time it opens the menu doesn't jump back to the last activeItem.

[a2441918]

@grancalavera I have the same issue. Can you enlighten me to fix this please?

https://codesandbox.io/embed/react-typescript-forked-dkrb3?file=/src/data.json&codemirror=1

[rhysbrettbowen]

@a2441918
add resetOnQuery={false}: https://codesandbox.io/s/react-typescript-forked-6xghf?file=/src/Select.tsx:3836-3856

[a2441918]

Thank you @rhysbrettbowen