fix: Popover closes on change of dropdowns values

[geido]

SUMMARY

The option menuPortalTarget of the react-select component was introduced in order for the dropdowns to show fully when overlaying certain container elements. However, setting the menuPortalTarget to document.body (as originally the multi-choice dropdown did and later the single-choice) comes with several issues, such as the click events being targeted outside of the container elements, that ultimately caused this issue #12388.

This PR removes the menuPortalTarget for both single-choice and multi-choice dropdowns. In addition to that, this introduces the optional ability to force the overflow visibility of the dropdowns for cases where setting the overflow visible isn't viable on the container element (see for instance issue #12004 )

It also adjusts some excessive z-index by setting it high enough to give it precedence over the Antd Popover and other components.

Closes #12388

BEFORE

BEFORE-Num.Births.Trend.mp4

AFTER

AFTER-Num.Births.Trend.mp4

TEST PLAN

1. Open the single and multi-choice dropdowns throughout the project
2. Make sure the dropdowns are displaying correctly

ADDITIONAL INFORMATION

• Has associated issue: [Explore]LONGITUDE & LATITUDE popover close after select #12388
• Changes UI
• Requires DB Migration.
• Confirm DB Migration upgrade and downgrade tested.
• Introduces new feature or API
• Removes existing feature or API

[geido]

@junlincc @rusackas

[codecov-io]

Codecov Report

Merging #12410 (88fa5ca) into master (e47350e) will increase coverage by 4.34%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##           master   #12410      +/-   ##
==========================================
+ Coverage   62.45%   66.79%   +4.34%     
==========================================
  Files        1015     1015              
  Lines       49537    49554      +17     
  Branches     5079     5083       +4     
==========================================
+ Hits        30937    33101    +2164     
+ Misses      18391    16323    -2068     
+ Partials      209      130      -79     

Flag	Coverage Δ
cypress	51.01% <100.00%> (?)
javascript	60.75% <33.33%> (-0.02%)	⬇️
python	64.03% <ø> (+0.47%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
.../src/explore/components/controls/SelectControl.jsx	93.45% <ø> (+6.54%)	⬆️
...rontend/src/visualizations/FilterBox/FilterBox.jsx	71.34% <ø> (+15.85%)	⬆️
...t-frontend/src/components/Select/OnPasteSelect.jsx	95.23% <100.00%> (ø)
...end/src/components/Select/SupersetStyledSelect.tsx	90.81% <100.00%> (+2.51%)	⬆️
superset/db_engine_specs/mysql.py	79.59% <0.00%> (-12.25%)	⬇️
.../src/dashboard/components/RefreshIntervalModal.tsx	87.80% <0.00%> (-1.94%)	⬇️
...-frontend/src/datasource/ChangeDatasourceModal.tsx	83.75% <0.00%> (-1.07%)	⬇️
...ews/CRUD/annotationlayers/AnnotationLayerModal.tsx	74.71% <0.00%> (-0.87%)	⬇️
...ntend/src/views/CRUD/annotation/AnnotationList.tsx	76.08% <0.00%> (-0.84%)	⬇️
...t-frontend/src/views/CRUD/welcome/SavedQueries.tsx	60.41% <0.00%> (-0.64%)	⬇️
... and 203 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e47350e...f6446af. Read the comment docs.

[junlincc]

@villebro @rusackas @ktmud need to make sure merging this PR will not create any conflict to changes in #12406

[adam-stasiak]

I found issue related to scrolling with dropdown active:
Left side - PR, before change
Go to /superset/dashboard/tabbed_dash/
Click on Region Type or select filter
Scroll screen outside the dropodown up and down
@graceguo-supercat Could you confirm we can live with this behavior as it is react-select library specific case which is not possible to fix now?
https://user-images.githubusercontent.com/25153919/104234255-6e087980-5453-11eb-82b9-dcf4da131da4.mov

[geido]

For reference, this is the react-select issue related to scrolling JedWatson/react-select#4088

[ktmud]

Looks like a very tricky bug. I can live with the sticky menu if it doesn't happen very often. Can we add an option to SupersetStyledSelect to disable the portal wrap by default and only enable it for places where it's likely to overflow the parent container?

[kkucharc]

Thank you for the contribution! Seems that moving menuPortalTarget higher structure may help.

I also saw scroll problem that @adam-stasiak mentioned. Unfortunately it happens in many places such as explore:

[geido]

I have cleaned up the things a bit. The menuPortalTarget wasn't really needed and I removed it. What is needed is only the menuPosition to be fixed for instances where setting the overflow visible on the container element isn't viable. I made that optional as @ktmud suggested by introducing a forceOverflow option so that individual cases can be handled appropriately.

When the optionforceOverflow is used, I am closing the dropdown on scroll (when the target of the scroll isn't the dropdown itself). In this way, the react-select issue (JedWatson/react-select#4088) mentioned by @adam-stasiak and @kkucharc is at least partially mitigated. It seems that the forceOverflow option is currently only required for the filters in the Dashboards. The undesired react-select behavior with scrolling should have a low impact in any case. The video below shows the new behavior.

I have also updated the PR description to better detail the problem and the chosen solution.

Sales.Dashboard.mp4

[adam-stasiak]

Removing data from dropdown causes modal dismiss.

Nagranie.z.ekranu.2021-01-12.o.22.51.08.mov

Moved this issue to: #12475

[geido]

@adam-stasiak seems related to a different issue to me

[kkucharc]

Thanks a lot for improvement!
According to the video in your comment: I understand that keeping dropdown open and sticked to the input until we click somewhere else is just impossible to achieve?

[geido]

Thanks a lot for improvement!
According to the video in your comment: I understand that keeping dropdown open and sticked to the input until we click somewhere else is just impossible to achieve?

@kkucharc impossible is not as I would define it. The problem is that this is a known issue of the react-select library and it does not have an optimal solution right now. Fixing this on our side might mean coming up with hacks that are not desirable. Closing the dropdown on scroll is already some sort of hack, but I would not go beyond that really.

[kkucharc]

@geido The video in this issue includes problem that your PR could solve. I added forceOverflow to CreatableSelect in SaveModal and it helped. Maybe you can add it in this PR so we will address the issue here as well? Otherwise we can create PR after merging this one :)

[geido]

@kkucharc that's an issue affecting all the modals. I think I have a solution for that and I am going to submit a separate PR. In fact, we don't need to necessarily use the forceOverflow option to fix that problem. In general, I'd use the forceOverflow option introduced by this PR only for those cases where the overflow issue can't be solved otherwise.

EDIT: #12502

[adam-stasiak]

Tested manually across other places in app - looks fine.

[ktmud]

LGTM, tested and works great after rebase.

[ktmud]

@junlincc @villebro can we make sure this PR goes into v1.0, too? Currently in 1.0.0 RC2, the dropdown menu of react-select is sticky on page scroll, which is not very nice:

[junlincc]

we are canceling rc2, kicking off rc3 to include this and a couple of others @ktmud

[villebro]

@ktmud I already cancelled rc2, so I can pick this into rc3. @junlincc remember to flag all PRs you want included in 1.0 with the appropriate label so I have a checklist.