ant-design Cascader 组件 hover 多层级(超出屏幕),会导致无法选择

3yhwsihp  于 5个月前  发布在  其他
关注(0)|答案(3)|浏览(65)

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 |

原因分析:

  1. hover 超出屏幕,下拉浮窗会自动计算相对屏幕的偏移量(不断 hover 到最后一层节点)
  2. 绑定的 mouseenter 事件在同一个点触发(创建的新节点会触发事件),导致超出外的节点都会显示出来
  3. 选择其他元素会产生展开或者收缩,无法选择(例:选择重现链接中3 4 5 6节点)
  4. 期待有好的解决方式或者情况说明

重现代码(附)

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 />);
1tu0hz3e

1tu0hz3e1#

Codepen 打不开,换 stackblitz 给个复现吧

xsuvu9jc

xsuvu9jc3#

Codepen 打不开,换 stackblitz 给个复现吧

https://stackblitz.com/edit/react-uczuui?file=demo.tsx

hover 超出屏幕的部分都可以试试选择节点

相关问题