Dropdown menu shows 2 scroll bars.

[aadilmgen-maker]

Screenshot

Description

The dropdown menu shows 2 scroll bars.
Using Superset 6.0.0rc2

Design input

design:suggest
Should show only 1 scroll bar.

[rusackas]

Not seeing this in Chrome on Mac. What browser are you using?

[shivamsahu-tech]

Hey @rusackas,
This issue exists and is visible on my setup as well.
I've verified it in both Chrome and Firefox (Ubuntu 24.04), and you can check the images below for reference.

Before (with issue)

Cause

In the file
superset-frontend/packages/superset-ui-core/src/components/Select/Select.tsx
(at line 739), a prop getPopupContainer is passed indirectly to the AntD Select component.
However, this prop is later overridden by the same prop value coming from
superset-frontend/src/features/databases/DatabaseModal/index.tsx (at line 1138).

getPopupContainer={triggerNode =>
          triggerNode.parentElement || document.body
        }

This setup forces the dropdown to render inside its parent container instead of the default document.body.
Since the parent container has a limited height and overflow constraints, it causes the dropdown to scroll within the parent component.

Solution

By default, Ant Design renders dropdowns inside document.body.
Removing the getPopupContainer prop from both locations allows AntD to handle this as intended, fixing the issue of dual scrollbars and clipped dropdowns.

Additionally, since the dropdownStyle prop already defines proper maxHeight and overflow rules, removing this prop does not create any layout or overflow issues.

After fix

Please let me know if this is the right approach so i can create a PR.
I'm currently a student and eager to learn from your feedback.

[Akarsh-28]

Yes, your fix looks correct to me.
The extra scroll bar appears because the dropdown is inside a container that already has scrolling capabilities.
Removing getPopupContainer allows the dropdown to open normally and resolves the issue.

[shivamsahu-tech]

@Akarsh-28
Yeah, but there is one more way to resolve it, via changing the styles (overflow, heights etc) of both containers.
So i am just waiting for maintainers before creating PR.

[Soumashree-Das]

If this is not fixed i will work on this issue

[CodeManBist]

Even i can work. If assigned !

[shivamsahu-tech]

@dosu what is the best way to resolve this issue ?

[dosubot]

Hi @shivamsahu-tech! I'm Dosu and I’m helping the superset team.

The best way to resolve the dual scrollbar issue is to remove the getPopupContainer prop from both the DatabaseModal and the custom Select component for this dropdown. This allows Ant Design to render the dropdown in document.body (its default), which avoids the double scrollbars and clipping issues. This approach is consistent with UI/UX best practices and is already used in other parts of Superset to prevent similar problems. There’s no evidence in the codebase or recent PRs that removing getPopupContainer here would cause side effects, as its use is context-specific and not globally required. Adjusting container styles is possible but more complex and less maintainable than relying on the default dropdown behavior.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[nishtha-agarwal-211]

Hi! I’d like to work on this issue if it’s still available.
Thanks!

[Resham2323]

Hi, I’d like to work on this issue.
I’ll start by understanding the related component and proposed solution. Thanks!

[aditikh-76]

Hi, I’m new to open source and would like to work on this issue.
Please let me know if it’s okay for me to take it.