fix: Issue #12004 timegrain not visibile

[geido]

SUMMARY

Fixes an issue that makes the SelectControl options hidden when overflowing.

TEST PLAN

1. Go to a Dashboard
2. Inside a Filter box open the options of any single-choice dropdown (multi-options dropdowns already worked properly)
3. Make sure the options are visible even when overflowing the filter box container

ADDITIONAL INFORMATION

• Has associated issue: [cosmetic][dashboard] Filter dropdown options on time grain filter not visible #12004
• Changes UI
• Requires DB Migration.
• Confirm DB Migration upgrade and downgrade tested.
• Introduces new feature or API
• Removes existing feature or API

[geido]

@rusackas @junlincc

[codecov-io]

Codecov Report

Merging #12258 (dd55c51) into master (164db3e) will decrease coverage by 2.35%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master   #12258      +/-   ##
==========================================
- Coverage   66.59%   64.23%   -2.36%     
==========================================
  Files         996      485     -511     
  Lines       49194    29806   -19388     
  Branches     4994        0    -4994     
==========================================
- Hits        32759    19146   -13613     
+ Misses      16298    10660    -5638     
+ Partials      137        0     -137     

Flag	Coverage Δ
cypress	?
javascript	?
python	64.23% <ø> (ø)

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

Impacted Files	Coverage Δ
...hboard/components/filterscope/FilterScopeModal.tsx
...et-frontend/src/dashboard/components/SaveModal.tsx
superset-frontend/src/dashboard/reducers/index.js
superset-frontend/src/showSavedQuery/index.jsx
...rontend/src/views/CRUD/dashboard/DashboardList.tsx
superset-frontend/src/views/CRUD/data/hooks.ts
superset-frontend/src/components/TableSelector.tsx
superset-frontend/src/utils/errorMessages.ts
...uperset-frontend/src/components/ExpandableList.tsx
...ws/CRUD/data/savedquery/SavedQueryPreviewModal.tsx
... and 500 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 164db3e...dd55c51. Read the comment docs.

[junlincc]

Thanks for the quick fix Diego!
manually tested. when i resize the filter box with Timegrain to really small, the dropdown got disconnected as I scroll.

Screen.Recording.2021-01-04.at.3.33.48.PM.mov

couple suggestions for futre:

1. add a video to all the PRs that have UI change or fix
2. test the feature throughout, resize the window or component from different directions

[geido]

@junlincc this is a problem with react-select and this issue was affecting the multi-choice dropdowns already. The issue is known and it is still open. You can read the details here JedWatson/react-select#4088. I will attempt a few possible fixes but there is a high chance that there is no optimal solution for this right now.

[junlincc]

@junlincc this is a problem with react-select and this issue was affecting the multi-choice dropdowns already. The issue is known and it is still open. You can read the details here JedWatson/react-select#4088. I will attempt a few possible fixes but there is a high chance that there is no optimal solution for this right now.

got it! thanks for letting me know. if the code looks good, alright to merge :) thanks for the fix!

[nikolagigic]

LGTM