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

[BUG] Select `onBlur` 失效 #1110

Closed zwlafk closed 1 year ago

zwlafk commented 1 year ago

Is there an existing issue for this?

Which Component

Select

Semi Version

latest

Current Behavior

失去焦点未触发onBlur 20220907184533

Expected Behavior

No response

Steps To Reproduce

可在官网复现

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

() => (
    <>
        <Select onBlur={() => console.log('blur!')} defaultValue='abc' style={{ width: 120 }}>
            <Select.Option value='abc'>抖音</Select.Option>
            <Select.Option value='ulikecam'>轻颜相机</Select.Option>
            <Select.Option value='jianying' disabled>剪映</Select.Option>
            <Select.Option value='xigua'>西瓜视频</Select.Option>
        </Select>
    </>
);

ReproducibleCode

No response

Environment

- OS:
- browser:

Anything else?

No response

pointhalo commented 1 year ago

v2.17 对 Select 的 A11y 做了键盘和焦点支持改造。

有蓝色border的情况下,代表此时select还是聚焦的。只点击 option的情况下,焦点还是在trigger上的,可以通过键盘再进行打开。点击了外部的时候才是真正失焦,此时会触发 onblur。

image

zwlafk commented 1 year ago

v2.17 对 Select 的 A11y 做了键盘和焦点支持改造。

有蓝色border的情况下,代表此时select还是聚焦的。只点击 option的情况下,焦点还是在trigger上的,可以通过键盘再进行打开。点击了外部的时候才是真正失焦,此时会触发 onblur。

image

现在点外部是不触发失焦的,我看已经有修复的PR了~