ant-design React 18 - the submenus have a flickering effect before hiding

bnl4lu3b 于 2022-11-03 发布在 React

关注(0)|答案(1)|浏览(149)

Reproduction link

Steps to reproduce

The code (it is already created in the link above):

Add a Menu component
Among its items, add a submenu with 4000 children

The user behaviour:
3. Move the mouse over the submenu
4. Move the mouse out of the submenu

What is expected?

The submenu should go away smoothly (without causing any visual artefacts) as it does in React 17.
https://codesandbox.io/s/antd-menu-react-17-antd-4-22-6-6p73ec?file=/index.js

What is actually happening?

There is a kind offlickering effect when the submenu goes away.

One can see it clearly when the submenu has a very large number of items. Butit also does happen with a small number of itemswhen the "CPU is overloaded or slow" (To test it in chrome: Developer Tools -> Tab: Performance Insight -> Set CPU throttling to 6x slowdown)