antd5 select dropdown component scroll on mobile is buggy

Issues
1

I’m using the Select component that was made available through the antd5 import via Plasmic Editor. I have a Next.js app Typescript in Codegen mode.

The issue is that the select component - after focusing the field using any mobile device (ios or android), will not consistently scroll within the select component on the the touch scroll gesture. Instead, the page scrolls sometimes and sometimes the select options.

What are the reproduction steps?

  1. Visit auto single backup using your mobile device
  2. Choose any of Select menus
  3. Attempt to scroll through the options with touch gesture.

image
image654×1062 66.1 KB

Relevant links:

2

Hey @rocket_dev,

I tried the site here and it seems that it only scrolls the site when the select scroll is already at the limit.
Can you confirm this is what is happening? And if so, is this still an issue for your use case?

3

I implemented a temporary workaround - by applying various overrides of ‘AntdSelect’ directly in code as shown below. But it’s ugly and had to be hardcoded to every select element in the project, so it’s very brittle and will break if any select element is renamed.

import { AntdSelect } from "@plasmicpkgs/antd5/skinny/registerSelect";

 <AntdSelect
                {...props}
                virtual={false}
                showSearch={false}
                dropdownStyle={{
                  overflowY: "auto",
                  zIndex: 9999, // Ensures dropdown is always above other elements
                }}

I believe the AntdSelect still has this problem and I’m hoping that at some point it will be fixed so I can undo these overrides.

To see the original bug, visit this other link (i will also update original bug report with this link): auto single backup

4

We’ve found this issue in their github repository which seems to be the same as you describe: The Antd Select scrolls a page not a drop down · Issue #37674 · ant-design/ant-design · GitHub
We will keep checking it to update our package when it’s fixed.