CascadeSelect: dropdown container creates scrolls in page instead of list container

[davidbejarcaceres]

I'm submitting a ...

[ x] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://forum.primefaces.org/viewforum.php?f=57

Codesandbox Case (Bug Reports)
https://codesandbox.io/s/exciting-villani-vqex4?file=/src/demo/CascadeSelectDemo.js:6294-6507

Current behavior
The issue with cascade select happens when the list is too long for the page to display in available space below the component, so it creates scrolls to the whole page instead of creating scroll just for the list container of the dropdown. When the list have many elements, and those elements have multiple levels.

Expected behavior
I found a custom fix to limit height of the cascade select container to prevent cascade to create scrolls in page and limits the max-height to the space in screen available below the component, the right CascadeSelect uses this strategy, but still, only the second container for the child items are limited and using the scroll as intended, the first level of items is limited to the space but the items are going below the limit without a scroll-y appearing.
We probably need a portal to fix this problem to use only available space in screen to display the dropdown preventing to create scrolls in the whole page, and just create scrolls in the items containers of the list in each level of children items.

Minimal reproduction of the problem with instructions

1. Place a CascadeSelec in the page (preferably vertically centered or the the bottom of the screen).
2. Add multiple "options" and each option with children, add enough of them so the dropdown list container goes below the screen space available.
3. You can see scroll bars for page are created, instead of adding scroll bars to the container of the list for each level in the DropDown.

Please tell us about your environment:
Browser Chrome v92.0.4515.107, OS Windows 10 20h1
"react": "^16.10.2",
"primeflex": "^2.0.0",
"primeicons": "^4.1.0",
"primereact": "^6.4.1",

• React version:
  16.10.2

• PrimeReact version:
  6.4.1

• Browser:

• Chrome v92.0.4515.107
• Firefox v90.0.2

• Language:
  Javascript

[melloware]

PrimeVue same issue: primefaces/primevue#3337

[kl-nevermore]

@melloware this may require adjusting the dom structure, I feel like there will be some breakchanges or css change,
I will try to fix it in our team tomorrow and test, then I can pr

I will also try using the portal

[melloware]

Can you also check what PrimeVue and PrimeNG are doing?

[kl-nevermore]

@melloware
There is a mobile-related one in primeng, but primeng can support this feature because the sublist wrapped by p-cascadeselectsub and position set here
demo

in primevue and primereact the sublist has no parent box, if set overflow and absolute for ul, the child elements would be affected

demo-react

[kl-nevermore]

Do you think we should follow primeng's implementation?

This will move p-cascadeselect-sublist to parent element and change classes(it's a breakchange?)
but when we use pt, the sublist will be applied to ul, I think there might be some ambiguity

This is how I currently implement it e.g.

 const listWrapperProps = mergeProps(
    {
        className: cx('sublistWrapper')
    },
    getPTOptions('sublistWrapper')
);
return props.level === 0 ? <>{ul}</> : <div {...listWrapperProps}>{ul}</div>;

//css
.p-cascadeselect-sublist-wrapper {
        position: absolute;
        min-width: 100%;
        z-index: 1;
        display: none;
    }

[melloware]

yep we can probabaly make it like PrimeNG especially if that solves the issue.

[kl-nevermore]

I found PrimeNG has not yet implemented PT and unstyled

To fix this problem need to add a new pt