[BUG] - Dropdown Menu scroll is actually the page scroll when it has too many items

[vmorales-2920]

NextUI Version

2.4.1

Describe the bug

We have a dropdown that has around 80 items, but when we click the dropdown the items go all around the page.

Is there a way to make the dropdown menu smaller? I already try it with css but I was unsuccessful.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

This is the code for the dropdown

use client'; import { Button, DropdownItem, DropdownTrigger, Dropdown, DropdownMenu, } from '@nextui-org/react'; import "../../app/globals.css";

interface IDataItem { id: number; name: string; }

interface IProps { type: string, data: IDataItem[] }

export default function DropdownMenuC({ type, data }: IProps) { return (

{type} {(item) => ( {item.name} )}

);

}

Expected behavior

to show an small the dropdown menu and that the dropdown menu scroll is not the page itself scroll.

Screenshots or Videos

Operating System Version

Linux

Browser

Chrome

[linear[bot]]

ENG-1006 [BUG] - Dropdown Menu scroll is actually the page scroll when it has too many items

[ShrinidhiUpadhyaya]

Hi @wingkwong, Can i work on this issue?

Question

What is the max height should i set to the Menu?

[vmorales-2920]

the dropdown has a max-height: 50vh, but it does not matter the height I assigned to the dropdown, it will still go all way down the page.

[ovidiu-h]

@vmorales-2920 as a quick fix you can use:

<DropdownMenu className="max-h-[50vh] overflow-y-auto">...</DropdownMenu>

[vmorales-2920]

Hi, is all good now. Thanks for your feedback. Have a great day!

[MarcusDelvecchio]

Having the same issue where trying to scroll the dropdown content scroll scrolls the page content. How did you resolve?

[vmorales-2920]

Hi, instead of using the dropdown component I use the select component and it worked!

[pawanrana1992]

It is still present and not yet resolved, even giving the overflow and max height the scroll of the dropdown body not based on its internal content. multiple items are not able to scroll as the scroll is not calculating the internal content height.

[pawanrana1992]

The

element is showing as first item in view, but there are lots of LI on top of it which is hiding behind.

Requesting you team please help fix this common issue first, as it is primary use component.

[pawanrana1992]

For quick solution, the class should be manually used inside ul element [&>div>ul]:overflow-x-hidden [&>div>ul]:overflow-y-auto [&>div>ul]:max-h-[250px]

 <Dropdown
        classNames={{
          base: 'before:bg-gray-100 shadow-none', // change arrow background
          content:
            'rounded-md rounded-top-0 shadow-none bg-gray-100 min-w-[200px] absolute right-[-50px] top-[-16px] [&>div>ul]:overflow-x-hidden [&>div>ul]:overflow-y-auto [&>div>ul]:max-h-[250px]',
        }}
      >
        <DropdownTrigger>
          <Button
            variant="light"
            className="capitalize"
            radius="full"
            size="sm"
            title="Change Language"
            autoFocus={false}
            startContent={
              <Image
                alt="Country"
                height={18}
                width={'auto'}
                src={selectedObject?.flag}
                className={iconClasses}
              />
            }
            endContent={
              <span className="material-icons-round text-lg">
                arrow_drop_down
              </span>
            }
          >
            {selectedObject?.name?.toUpperCase()}
          </Button>
        </DropdownTrigger>
        <DropdownMenu
          aria-label="currency-and-country"
          variant="flat"
          disallowEmptySelection
          selectionMode="single"
          selectedKeys={selectedKeys as any}
          onSelectionChange={setNewCurrency}
        >
          {countries?.map((item, index) => {
            return (
              <DropdownItem
                className={`text-sm ${index == 0 ? 'mr-20' : ''}`}
                title={item.name}
                description={
                  <span
                    data-ab="abcd"
                    className="text-ellipsis block overflow-hidden whitespace-nowrap max-w-[150px]"
                  >
                    Currency: ${item?.iso2?.toUpperCase() ?? ''}
                  </span>
                }
                startContent={
                  <Image
                    alt="Country"
                    height={24}
                    // width={24}
                    src={item.flag}
                    className={iconClasses}
                  />
                }
                key={item?.iso2?.toUpperCase()}
              />
            );
          })}
        </DropdownMenu>
      </Dropdown>

[vmorales-2920]

Hi, what I did was replacing the dropdown component with the select component and it worked for me