CascadeSelect: In a modal, overlay sub-items run off the bottom of the screen if the list is too long #3337
Labels
Resolution: Help Wanted
Issue or pull request requires extra help and feedback
Milestone
Describe the bug
I have a CascadeSelect with 4 root items, and one of the items (Location) has a list of subitems (Locations) and some of those have subitems (Sublocations).
The problem is that there's like 20 locations so the list runs off the bottom of the page making it impossible to select those.
I looked at the library code and it looks like the problem stems from this function in
node_modules/primevue/cascadeselect/CascadeSelectSub.vue
:It currently appears to check if the subitems can fit horizontally but not vertically.
It has more problems than that but here's how mine looks:
The left and bottom sides of the image are the left and bottom sides of the viewport.
Here's a minimal reproduction: https://codesandbox.io/s/v6j89o
I agree the data itself is kind of horrific. I can apply a max-width to the overlay sub-items. Part of the problem there is we have production data that has up to 75 character locations. It seems there is a flaw in the side-edge detection when the sub-items would go off the side. It should put the sub-items on top of the items.
I recall the ContextMenu handles menu sub-menu items much better. Maybe there is a way to borrow some of that logic.
Reproducer
https://codesandbox.io/s/v6j89o
PrimeVue version
3.12.6
Vue version
3.x
Language
ES6
Build / Runtime
Vite
Browser(s)
Chrome
Steps to reproduce the behavior
Expected behavior
Sub-items should be visible inside the viewport because the page is not scrollable while a modal is open.
The text was updated successfully, but these errors were encountered: