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.

Sign up for GitHub

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

Jump to bottom

FolderPicker: Prevent dropdown menu from disappearing off screen #32603

Merged
merged 2 commits into from Apr 7, 2021
Merged

FolderPicker: Prevent dropdown menu from disappearing off screen #32603

merged 2 commits into from Apr 7, 2021

Conversation

jackw
Copy link
Contributor

@jackw jackw commented Apr 1, 2021 •
edited

What this PR does / why we need it:
This PR fixes odd positioning issue with the FolderPicker component that causes it to appear offscreen.

Before After
Screenshot 2021-04-01 at 16 30 12 Screenshot 2021-04-01 at 16 29 01

I also followed the same implementation in this earlier PR to fix issues around select menus not being able to expand beyond the modal container.

Which issue(s) this PR fixes:

Fixes #32474

Special notes for your reviewer:

I tested the following uses of FolderPicker and couldn't find any visual issues with these changes:

  • public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.tsx
  • public/app/features/library-panels/components/AddLibraryPanelModal/AddLibraryPanelModal.tsx
  • public/app/features/manage-dashboards/components/ImportDashboardForm.tsx
  • public/app/features/search/components/MoveToFolderModal.tsx
  • public/app/plugins/panel/alertlist/module.tsx
  • public/app/plugins/panel/dashlist/module.tsx

@jackw jackw added this to the 7.5.3 milestone Apr 1, 2021
@jackw jackw self-assigned this Apr 1, 2021
@jackw jackw requested a review from a team April 1, 2021 14:38
@jackw jackw added this to In Review in Frontend Platform Backlog via automation Apr 1, 2021
@jackw jackw requested review from torkelo and kaydelaney and removed request for a team April 1, 2021 14:38
torkelo
torkelo reviewed Apr 2, 2021
View reviewed changes
Copy link
Member

@torkelo torkelo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This feels like a hacky solution in that it requires adding custom styles to every modal we use a select in.

In this PR #32411 @mckn explored changing the portal for the select, and increasing it's zindex so that it can always be ontop. What do you think of that solution ?

@jackw
Copy link
Contributor Author

jackw commented Apr 2, 2021

This feels like a hacky solution in that it requires adding custom styles to every modal we use a select in.

Yeah I agree it is a bit hacky. @mckn approach with the portal seems like a more robust solution. Shall I revert these modal changes but keep the FolderPicker position change @torkelo?

@torkelo
Copy link
Member

torkelo commented Apr 2, 2021

yes

@jackw jackw force-pushed the jackw/folder-picker-positioning branch from 47ba11b to 0d2bcae Compare April 2, 2021 08:02
@jackw jackw changed the title FolderPicker: Prevent dropdown menu from disappearing off screen or inside modal FolderPicker: Prevent dropdown menu from disappearing off screen Apr 2, 2021
@jackw jackw force-pushed the jackw/folder-picker-positioning branch from 0d2bcae to 62a3701 Compare April 7, 2021 07:13
@jackw jackw merged commit 8b38b70 into master Apr 7, 2021
Frontend Platform Backlog automation moved this from In Review to Done Apr 7, 2021
@jackw jackw deleted the jackw/folder-picker-positioning branch April 7, 2021 08:18
grafanabot pushed a commit that referenced this pull request Apr 7, 2021
@jackw @grafanabot
FolderPicker: Prevent dropdown menu from disappearing off screen (#32603
502aeda 
)

* fix(folderpicker): remove position fixed so menu works in panel editor for dashlist & alertlist

* test(folderpicker): update snapshot

(cherry picked from commit 8b38b70)
@grafanabot grafanabot mentioned this pull request Apr 7, 2021
Merged
jackw added a commit that referenced this pull request Apr 7, 2021
@grafanabot @jackw
FolderPicker: Prevent dropdown menu from disappearing off screen (#32603
68d8de7 
) (#32741)

* fix(folderpicker): remove position fixed so menu works in panel editor for dashlist & alertlist

* test(folderpicker): update snapshot

(cherry picked from commit 8b38b70)

Co-authored-by: Jack Westbrook <jack.westbrook@gmail.com>
@kaydelaney kaydelaney mentioned this pull request Sep 23, 2022
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@torkelo torkelo torkelo approved these changes

@kaydelaney kaydelaney Awaiting requested review from kaydelaney

Assignees

@jackw jackw

Labels
add to changelog area/dashboard/folders area/frontend area/panel/alertlist area/panel/dashboard-list old backport v7.5.x Mark PR for automatic backport to v7.5.x type/bug
Projects
None yet
Milestone
7.5.3
Development

Successfully merging this pull request may close these issues.

Plugin Dashboard List doesn’t work after upgrade Grafana to 7.5.1-1
2 participants
@jackw @torkelo