Closed Dawnwangzi closed 2 years ago
可以提供一个可以复现的 codesandbox 链接吗,这样看起来更快一点~
https://codesandbox.io/s/charming-khayyam-j9zczw?file=/src/App.js @shijiatongxue
在这个粉色区域点击 里面的select不会收起
看了下这个问题,问题原因是 Select 会默认对浮层内的事件阻止冒泡,所以当点击select1浮层内的白色区域时,这个点击事件实际上会被阻止掉,从而到不了body上,也就无法触发select2的clickOutSide判断进而收起 Select。
浮层内事件是否阻止冒泡有开关可以控制。如果你希望点击 Select 1的白色区域,收起select2的话,可以给select1设置 stopPropagation = false
来实现
import "./styles.css";
import { Select } from "@douyinfe/semi-ui";
export default function App() {
const outerTopSlot = (
<div style={{ height: 300, width: 400, backgroundColor: "pink" }}>
<Select style={{ width: 200 }}>
<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>
</div>
);
return (
<div className="App">
<Select
+ stopPropagation={false}
emptyContent={<div style={{ height: 200}}>eee</div>}
outerTopSlot={outerTopSlot}
style={{ width: 400 }}>
</Select>
</div>
);
}
Select的文档上没写这个API,但实际上可以透传(Select 浮层底层用的是 Tooltip,这个props会被透传至 Tooltip上消费),我们后续补一下文档。
两种不同行为,按需通过开关决定。
Which Component 出现bug的组件
semi-ui version
Expected result 期望的结果是什么
Actual result 实际的结果是什么
Steps to reproduce 复现步骤
Reproducible code 复现代码
Additional information 补充说明