Select dropdown doesn't show when click on select (I need to click second time on a different area)

[ghost]

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

htttp://codesandbox.com

Steps to reproduce

Check image link (https://ibb.co/qNgfB8t)

What is expected?

Select dropdown should open

What is actually happening?

When I click select as you can see on the image: https://ibb.co/qNgfB8t,
the dropdown isn't shown immediately, rather it is shown afterwards, when I click second time on a different place on screen.
Any ideas what can be wrong?
Sorry I don't have reproducible example, even in my code this happens sometimes.

PS It doesn't matter if the options are already loaded or not (usually I load them asynchronously), this has happened
also when I clicked after the options were loaded. And if the options weren't loaded, it still had to display the "no data" dialog
timely.

Environment	Info
antd	4.6.6
React	16.3
System	Ubuntu
Browser	Chrome Version 78.0.3904.108 (Official Build) (64-bit)

[ant-design-bot]

Hello @Giorgi-M. Please provide a online reproduction by forking this link https://u.ant.design/codesandbox-repro or a minimal GitHub repository. Issues labeled by Need Reproduce will be closed if no activities in 7 days.

你好 @Giorgi-M, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击 此处 创建一个 codesandbox 或者提供一个最小化的 GitHub 仓库。7 天内未跟进的 issue 将会被自动关闭。

[ghost]

@afc163 It seems not easy to reproduce on different code base; also I am a bit busy nowadays.

But the image proves the bug is there 100%.
Also now I discover, in my code base, I can't recreate this on Firefox, it happens on Chrome.

[ghost]

@afc163 I downgraded antd version to 4.6.0 and the bug doesn't happen anymore, which again proves this is bug of the component.

[dingchaoyan1983]

I have the same problem

[ghost]

@dingchaoyan1983 If you can post reproducible example it would be nice otherwise they will close this issue(I couldn't reproduce easily, was also a bit busy). @afc163

[simonauner]

I have the same problem with <Select>. Downgrading to 4.6.0 solved it.
Also had the same issue with a button-popover combination:

<Popover
    content={
        <p>
            example content
        </p>
    }
    title="example title"
    trigger="click"
>
    <Button type="primary" shape="circle" icon={<InfoCircleOutlined />} />
</Popover>

I click once on the button, and nothing happens. Then when I click a second time it will both open and close the <Popover>. After that I can click it once to open it.

[alalessi]

I also experience this with <Select>, but it only happens occasionally. It's hard to reproduce consistently. When it happens, the user must triple click: The first failed click, the second to apparently "close" the dropdown that never showed, and the last time to retry. We've never discovered this behaviour requiring more than three clicks.

[opatut]

Hello, I am having the same problem in a huge codebase with basically all Popover and Select components, but when I build a minimal example to reproduce it, it does not happen. So it might be something interfering with antd, or a different part of antd interfering with these components, or just the plain react tree complexity....

Also, sometimes it does not break at all until the 20th click or so, and sometimes it happens consistently. I don't think a reliable reproduction will be possible. It could be a race condition?

[opatut]

I've checked. The popover content appears in the DOM, but the .ant-popover element has opacity: 0 in style, and zoom-big-enter-appear as class. The animation apparently never plays.

[opatut]

I've traced it into rc-trigger where the status does not propagate from "align" to "motion", thus never completing into "stable". The animation is not played. That code contains a lot of requestAnimationFrame and also some async code (also in PopupInner component), so the race condition causing weirdness is IMO a reasonable assumption for now.

[opatut]

I provided what I believe is a fix at react-component/align#86 for the ticket I reported at react-component/align#85 -- does anybody have connections to the maintainer of that component?

[opatut]

Damn it, here is a dummy "reproduction example" to satisfy the bot and maybe get the label removed:

https://codesandbox.io/s/antd-reproduction-template-forked-9li3k

It doesn't show the issue, because the issue is a race condition, probably in requestAnimationFrame and some of the async code, and cannot safely be reproduced in a stripped down example, but appears quite often in real, complex applications.

Please some dev look at this and/or ping somebody over at react-component/align to merge and release react-component/align#86?

[ghost]

@afc163
We need to tag some other antd developers too maybe, so that this gets attention.

[ant-design-bot]

This issue is closed because it has been marked as Need Reproduce, but has not had recent activity.
If you can provide a reproduce, feel free to ping anyone of our maintainers to reopen this issue.
Thank you for your contributions.

[opatut]

FYI my fix was released as rc-align@4.0.9. Explicitly requesting that in your package.json should work, it fixed the problem for me.

[simonauner]

I can confirm that this is fixed in antd 4.8.4!
🥳

[thaithanhtung]

I delete cache, node_module and reinstalling package.json

[MaduraHerath]

Issue is still there for "antd": "^4.17.4",
need help immediatly

[muskankhedia]

I am also facing this issue with the v4.24.8. Any help will be really appreciated.
Are there any alternative to select tag?

[necrifede]

I am facing the issue also on v4.24.14 version, as a workaround I am including the css.

.ant-select-dropdown {
  z-index: 1700 !important;
}