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.47k stars 716 forks source link

[BUG] <Select> select 在使用getPopupContainer 之后,点击空白处不能调用 onBlur #2485

Closed JamesLi-dev closed 1 month ago

JamesLi-dev commented 2 months ago

Is there an existing issue for this?

Which Component

Select

Semi Version

^2.64.0

Current Behavior

select 在使用getPopupContainer 之后,点击空白处不能调用 onBlur , 只能通过再次点击select 隐藏下拉列表 1

Expected Behavior

点击空白处可以收起下拉,或者有个状态控制下拉展开收起

Steps To Reproduce

No response

ReproducibleCode

No response

Environment

- OS:macos
- browser:google

Anything else?

No response

pointhalo commented 1 month ago

没有办法复现你的问题

  1. 检查一下是否你的dom上有阻止事件传播之类的逻辑
  2. 我们需要一个能复现问题的 codesandbox 链接

这段代码直接粘贴到官网上,无论 getPopupContainer 使用哪一行,行为都是正常的。

import React, { useRef } from 'react';
import { Select } from '@douyinfe/semi-ui';

() => {
    const divRef = useRef();
    return (
    <div ref={divRef} style={{position:'relative'}}>
        <div id='id' style={{position: 'relative'}}></div>
        <Select
            clickToHide
            showClear
            // getPopupContainer={() => document.getElementById('id')}
            getPopupContainer={() => divRef.current || document.body}
            style={{ width: '180px' }}
            placeholder="try abc"
            onBlur={() => Toast.info('on blur')}
        >
            <Select.Option value="abc">ABC</Select.Option>
            <Select.Option value="ulikecam">HOTSOON</Select.Option>
            <Select.Option value="jianying">PIPIXIA</Select.Option>
            <Select.Option value="xigua">XIGUA</Select.Option>
        </Select>
    </div>
    );
};

20240919163637_rec_