DouyinFE / semi-design

🚀A modern, comprehensive, flexible design system and React UI library. 🎨 Provide more than 3000+ Design Tokens, easy to build your design system. Make Semi Design to Any Design. 🧑🏻‍💻 Design to Code in one click
https://semi.design
Other
8.19k stars 695 forks source link

[Popover] Popover 在 trigger hover 下 如果预先点击 trigger 而不是 hover,会导致浮层内元素无法触发 click 事件 #875

Closed DaiQiangReal closed 2 years ago

DaiQiangReal commented 2 years ago

Which Component 出现bug的组件

semi-ui version

Expected result 期望的结果是什么

Actual result 实际的结果是什么

Steps to reproduce 复现步骤

If your reproduction scene is complicated, you can list the reproduction steps here

如果你的复现场景比较复杂,可以在这里列出复现的步骤

Reproducible code 复现代码

import React from 'react';
import { Popover, Tag } from '@douyinfe/semi-ui';

function Demo() {
    return (
        <Popover
            content={
                <Select defaultValue='abc' style={{ width: 120 }}>
            <Select.Option value='abc'>抖音</Select.Option>
            <Select.Option value='hotsoon'>火山</Select.Option>
            <Select.Option value='jianying' disabled>剪映</Select.Option>
            <Select.Option value='xigua'>西瓜视频</Select.Option>
        </Select>
            }
        >
            <Button>点击此处</Button>
        </Popover>
    );
}

Reproducible Codesandbox link: https://codesandbox.io

Reproducible Codesandbox link: https://codesandbox.io

Additional information 补充说明

shijiatongxue commented 2 years ago

This bug is related with a11y. We added blur event to trigger when trigger prop was hover.

So when we click panel, trigger(in this case, Button) will blur and then panel closed.

We need re-consider this situation.

YannLynn commented 2 years ago

fixed in 2.17.0-beta.0