Fix: dropdown overflow

[pKorsholm]

What

• fix overflow issue with dropdown

How

• switch dropdown component from react-multi-select-component to react-select (which has more users, stars and downloads in general)
• react-select supports native portalling of the dropdown which enables us to show it as an overlay instead, which react-multi-select-component doesn't have
• add ModalContext which exposes a ref to the modal portal

[netlify]

✔️ Deploy Preview for elastic-keller-bcaedb ready!

🔨 Explore the source changes: 12cf4d1

🔍 Inspect the deploy log: https://app.netlify.com/sites/elastic-keller-bcaedb/deploys/620d3225580c100008c42743

😎 Browse the preview: https://deploy-preview-335--elastic-keller-bcaedb.netlify.app

[kasperkristensen]

Very cool! Howver, I noticed two issues.

You are able to take the dropdown for a walk when scrolling 😅

Screen.Recording.2022-02-15.at.10.02.27.mov

And if you open the dropdown using the chevron then search field is not focused and the dropdown will have a different position then when it the search fields is focussed:

Screen.Recording.2022-02-15.at.10.12.18.mov

[pKorsholm]

The scrolling issue is a known issue: JedWatson/react-select#4088 (which was introduced in 3. something, we use 5. something else)

I have solved it by closing the dropdown when scrolling.

[kasperkristensen]

@pKorsholm Ahh cool, this brings it very close to being perfect. Closing it on scroll does result in some weird behaviour if the select is very close to the bottom of the viewable part of a scrollable div. This scrolls the window a bit and then closes the Select immediately

Screen.Recording.2022-02-15.at.16.03.44.mov

[olivermrbl]

Also getting strange behaviour when trying to open other dropdowns, when one is already open. It seems, that in order for us to open a different dropdown and close the currently open one, we have to either scroll to close it, or close it by clicking on it.

See attached video for reference.

Screen.Recording.2022-02-16.at.11.23.04.mov

[pKorsholm]

I think we are closing in 😄 changed up the open/close monitoring in favor of the built in controls and instead now monitor for focus and blur.

I fixed the issue with 'jump scrolling using a debounce such that scrolling in the first 50 ms after opening the dropdown will not close it. If you have a better suggestion please let me know, issue is that scroll events when opening the dropdown and regular scrolling are indistinguishable.

Screen.Recording.2022-02-16.at.16.03.08.mov

[olivermrbl]

To somewhat re-use @kasperkristensen's epic phrase from above, I can't take the dropdown for a walk, if I resize the window 😅