PB-1750: fix print scales going out of screen (overflow)#1381
Conversation
web-mapviewer
|
||||||||||||||||||||||||||||
| Project |
web-mapviewer
|
| Branch Review |
fix-PB-1750-dropdown-overflow-issue
|
| Run status |
|
| Run duration | 04m 33s |
| Commit |
|
| Committer | Pascal Barth |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
0
|
Flaky
|
0
|
Pending
|
20
|
Skipped
|
0
|
Passing
|
260
|
| View all changes introduced in this branch ↗︎ | |
451428c to
0096439
Compare
6bc0b0f to
7de363b
Compare
refactoring the DropdownButton component to use FloatingUI, and ensuring the size of the dropdown "menu" (aka the floating thing) can't grow outside the document's height, and switch to a scroll/overflow if needed
11f4501 to
ba5886e
Compare
schtibe
left a comment
There was a problem hiding this comment.
There's an issue with the dropdown: when you change the style of a marker, the popup closes when selecting a size or a symbol library
|
While reviewing this, I started to wonder why we even have a custom dropdown component. Currently the component doesn't support selecting entries by arrow or search by typing, which the native dropdowns do. I presume it's either because styling is too hard or it's because the native dropdowns can't be made with just the icon 🤔 |
|
Native dropdown are a good trade-off solution, but can't be styled Don't know if we should simply let browser do the rendering or if that would bring other issues... |
ltkum
left a comment
There was a problem hiding this comment.
It seems mostly okay to me :)
stop the propagation of click event on items, after they are caught by the dropdown button component. This way the parent floatingUI window doesn't receive the click event, and is not closing because of it.
I took a quick look around, and most of the UI libraries that I checked are doing it custom, too. There's also the approach of doing both for a11y, but I would think this should be possible with the correct So I vote for keeping it and maybe extend it for arrow selection, but that would be another PR entirely! |
and raise up a notch the seed/upper limit for random ID on Dropdown, to reduce even more the chance to get twice the same number on subsequent uses (and have twice the same HTML ID in the app)
here's the ticket for that https://swissgeoplatform.atlassian.net/browse/PB-1879 👍 |
ltkum
left a comment
There was a problem hiding this comment.
It now looks good to me :)
refactoring the DropdownButton component to use FloatingUI, and ensuring the size of the dropdown "menu" (aka the floating thing) can't grow outside the document's height, and switch to a scroll/overflow if needed
Test link