SUMO Select下拉框关闭后点击仍选中隐藏值问题求助

问题根源 #

这种情况通常是因为原生<select>元素或其内部的<option>在下拉框关闭时仍处于可交互状态，没有被组件生成的自定义下拉容器完全遮挡，导致点击下拉框区域时触发了隐藏选项的选中事件。

具体修复方案 #

1. 禁用原生select的点击交互 #

给关闭状态下的原生<select>添加pointer-events: none，阻止它接收点击事件：

/* 适配SUMO Select的默认类名，根据你的实际DOM结构调整 */
.sumoselect.closed select {
  pointer-events: none;
}

2. 确保自定义容器层级高于原生select #

让组件生成的自定义下拉框容器覆盖在原生select之上，完全遮挡可点击区域：

.sumoselect {
  position: relative;
}
.sumoselect .selectBox {
  position: relative;
  z-index: 10; /* 确保层级高于原生select */
  width: 100%;
  height: 100%;
}

3. 修正组件初始化配置 #

检查SUMO Select的初始化参数，开启nativeOnTop: false（若存在该配置），让自定义UI优先于原生select渲染：

$('.your-select-target').SumoSelect({
  nativeOnTop: false,
  // 其他你的配置项
});

4. 强制隐藏原生select的可交互区域 #

如果以上方法无效，直接让原生select透明且不可点击，仅保留组件所需的功能：

.sumoselect select {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

验证步骤 #

修改后测试两个场景：

• 下拉框关闭时点击区域，确认不会选中隐藏选项
• 打开下拉框，确保正常的选择功能不受影响

内容的提问来源于stack exchange，提问作者Abhay Babariya