select1 中在innerTopSlot中套用另一个select2，select2展开下拉菜单 点击select1中非select2的空白区域，select2菜单不会收起

[Dawnwangzi]

Which Component 出现bug的组件

• Select

semi-ui version

• 2.10.4

Expected result 期望的结果是什么

• select1 中在innerTopSlot中套用另一个select2
• select2展开下拉菜单 点击select1中非select2的空白区域（就是select2下拉菜单外的区域，但这个区域在select1的下拉菜单中）
• select2下拉菜单会收起

Actual result 实际的结果是什么

• 点击select1下拉菜单中非select2的空白区域 select2下拉菜单不会收起

Steps to reproduce 复现步骤

• 同上

Reproducible code 复现代码

...
const outerTopSlot = (
    <div style={{width: 1000, height: 1000}}>
      ...
     // select2
     <Select
         multiple
         style={{ width: '320px' }}
        defaultValue={['abc', 'hotsoon']}
      >
        <Select.Option value="abc">抖音</Select.Option>
        <Select.Option value="hotsoon">火山</Select.Option>
        <Select.Option value="jianying">剪映</Select.Option>
        <Select.Option value="xigua">西瓜视频</Select.Option>
     </Select>
</div>
)

// select1
<Select
        ref={selectRef}
        value={showTimeString ? timeString : select}
        size="small"
        className="time-select"
        dropdownClassName="time-select-dropdown"
        placeholder="请选择时间"
        onSelect={onSelectChange}
        **outerTopSlot={outerTopSlot}**
        position={'bottomRight'}
        showArrow={false}
        suffix={<CustomIconArrowDown style={{ marginRight: '8px' }} />}
        renderSelectedItem={renderSelectedItem}
        onDropdownVisibleChange={(v) =>
          v && setActiveTabKey(isCusTime ? '2' : '1')
        }
      >

Additional information 补充说明

• select中有select

[shijiatongxue]

可以提供一个可以复现的 codesandbox 链接吗，这样看起来更快一点~

[Dawnwangzi]

https://codesandbox.io/s/charming-khayyam-j9zczw?file=/src/App.js @shijiatongxue
在这个粉色区域点击 里面的select不会收起

[pointhalo]

看了下这个问题，问题原因是 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上消费），我们后续补一下文档。

两种不同行为，按需通过开关决定。