Reproduction link
https://codepen.io/eng-LIU/pen/pompOGb
Steps to reproduce
如链接所示
What is expected?
可以任意选择其中一个节点
What is actually happening?
选择3 4 5 6等等,无法选择(收缩 展开)
| Environment | Info |
| ------------ | ------------ |
| antd | 5.18.1 |
| React | latest |
| System | MacOS Ventura 13.5.1 |
| Browser | Chrome 125.0.6422.142 |
原因分析:
- hover 超出屏幕,下拉浮窗会自动计算相对屏幕的偏移量(不断 hover 到最后一层节点)
- 绑定的 mouseenter 事件在同一个点触发(创建的新节点会触发事件),导致超出外的节点都会显示出来
- 选择其他元素会产生展开或者收缩,无法选择(例:选择重现链接中3 4 5 6节点)
- 期待有好的解决方式或者情况说明
重现代码(附)
const { createRoot } = ReactDOM;
const { Cascader, Input, Row, Col, Form } = antd;
const FormItem = Form.Item;
const options = [
{
value: 1,
label: 1,
children: [
{
value: 2,
label: 2,
children: [
{
value: 3,
label: 3,
children: [
{
value: 4,
label: 4,
children: [
{
value: 5,
label: 5,
children: [
{
value: 6,
label: 6,
children: [
{
value: 7,
label: 7,
children: [
{
value: 8,
label: 8
}
]
}
]
}
],
}
]
},
{
value: '3-1',
label: '3-1',
},
{
value: '3-2',
label: '3-2'
}
],
}
],
}
],
}
];
const onChange = (value) => {
console.log(value);
};
const App = () => (
<Form>
<Row gutter={20}>
<Col span={18}>
<FormItem label="Cascader 正常情况">
<Cascader
options={options}
maxTagCount="responsive"
expandTrigger="hover"
multiple
showCheckedStrategy={Cascader.SHOW_CHILD}
onChange={onChange}
/>
</FormItem>
</Col>
<Col span={6}>
<FormItem label="Cascader 超出屏幕">
<Cascader
options={options}
maxTagCount="responsive"
expandTrigger="hover"
multiple
showCheckedStrategy={Cascader.SHOW_CHILD}
onChange={onChange}
/>
</FormItem>
</Col>
</Row>
</Form>
);
const ComponentDemo = App;
createRoot(mountNode).render(<ComponentDemo />);
3条答案
按热度按时间1tu0hz3e1#
Codepen 打不开,换 stackblitz 给个复现吧
wj8zmpe12#
我可以打开
xsuvu9jc3#
Codepen 打不开,换 stackblitz 给个复现吧
https://stackblitz.com/edit/react-uczuui?file=demo.tsx
hover 超出屏幕的部分都可以试试选择节点