Dropdown: panel max-height cannot be overridden by props or theme

[bear-bibeault]

Describe the bug

For the dropdown component, the max-height style attribute is placed on the p-dropdown-items-wrapper element, which makes it impossible to override either by classname or by props to the Dropdown component.

Similar to the way the AutoComplete component is structured, this style attribute should be placed on the p-dropdown-panel element so that it can be overridden by use of the panelStyle prop for the DropDown component.

As it stands, there appears to be no way to affect the styles applied to p-dropdown-items-wrapper, so the height of the dropdown panel cannot be changed either by the props to DropDown, or via classnames on the theme.

As pointed out above, the max-height for the AutoCompleter panel is placed on p-autocomplete-panel element, where is can be overridden by the panelStyle prop; Dropdown should be similarly structured.

Reproducer

No response

PrimeReact version

9.2.3

React version

18.x

Language

TypeScript

Build / Runtime

Next.js

Browser(s)

all browsers

Steps to reproduce the behavior

1. Create a Dropdown element.
2. Use the panelStyle prop to set a custom max-height attribute (in the example code below, '400px').
3. Inspect the panel structure and see that while the custom max-height is correctly placed on the p-dropdown-panel element, it is overridden by a max-height attribute on the p-dropdown-items-wrapper element, making it impossible to affect.

<div
   class="p-dropdown-panel p-component p-ripple-disabled p-connected-overlay-enter-done"
    style="max-height: 400px; z-index: 1001; min-width: 171px; transform-origin: center top; top: 436.562px; left: 16px;"
>
  <div class="p-dropdown-items-wrapper" style="max-height: 200px;">
    <ul class="p-dropdown-items" role="listbox">        
        ...

Expected behavior

Similarly to the way the AutoCompleter component places the max-height on the p-autocomplete-panel element where it can be overridden via the panelStyle prop, the max-height for the DropDown element should be placed on the p-dropdown-panel element so that it may be overridden via the DropDown's panelStyle.

[bear-bibeault]

If it helps:

primereact/components/lib/dropdown/DropdownPanel.js

Line 186 in 95d1394

<div className="p-dropdown-items-wrapper" style={{ maxHeight: props.scrollHeight || 'auto' }}>

[melloware]

Feel free to submit a PR!

[bear-bibeault]

I have a PR tested and prepared, but I do not have permissions to push up to the repo. How may that be obtained?

[melloware]

If you do it in a branch on your fork it will let you submit it as a PR. I would check GitHub docs on how to do a PR

[melloware]

Here you go: https://opensource.com/article/19/7/create-pull-request-github

[melloware]

@userkks can you comment on this ticket so I can assign it to you?

[userkks]

Hi, @melloware, sure.