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.

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

CascadeSelect: In a modal, overlay sub-items run off the bottom of the screen if the list is too long #3337

Open
agm1984 opened this issue Nov 25, 2022 · 1 comment
Labels
Resolution: Help Wanted Issue or pull request requires extra help and feedback
Milestone

Comments

@agm1984
Copy link

agm1984 commented Nov 25, 2022

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:
image

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:
image
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

  1. Open CodeSandbox link
  2. Click CascadeSelect input
  3. Click Location
  4. Attempt to click last item in list
  5. Also, attempt to see Sublocations

Expected behavior

Sub-items should be visible inside the viewport because the page is not scrollable while a modal is open.

@agm1984 agm1984 added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Nov 25, 2022
@mertsincan mertsincan added Resolution: Help Wanted Issue or pull request requires extra help and feedback and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Dec 27, 2024
@mertsincan mertsincan added this to the Future milestone Dec 27, 2024
@github-project-automation github-project-automation bot moved this to Review in PrimeVue Dec 27, 2024
Copy link

Due to PrimeTek's demanding roadmap for PrimeVue and the limited bandwidth of the core team, this issue is available for anyone to work on. Make sure to reference this issue in your pull request. ✨ Thank you for your contribution! ✨

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Resolution: Help Wanted Issue or pull request requires extra help and feedback
Projects
Status: Review
Development

No branches or pull requests

2 participants