Xpages集成Select2 v4列表框在IE浏览器中异常问题求助

我使用Select2 v4增强XPages标准列表框，该组件在Chrome浏览器中表现正常：点击可展开下拉框，点击下拉框外部即可关闭；但在IE浏览器中存在两个异常：

• 点击下拉框外部无法关闭它，必须选中某一选项后点击外部才会关闭
• 使用ESC键关闭下拉框后，点击页面任意位置都会触发下拉框再次展开

相关代码 #

XPages列表框代码

<xp:listBox id="lstPartnerRoles"
value="#{document1.PartnerRoles}" 
style="width: 30% !important;"
rendered="#{javascript:document1.isEditable()}" 
multiple="true">
<xp:selectItems>
<xp:this.value>
<![CDATA[#{javascript:var list = @DbLookup(@DbName(), "LookupKeywordLists", "Partner Roles", 2); return @Explode(list,",")}]]>
</xp:this.value>
</xp:selectItems>
</xp:listBox>

Select2初始化脚本

<xp:scriptBlock>
    <xp:this.value>
        <![CDATA[    $(document).ready(function() {
        x$("#{id:lstPartnerRoles}").select2({
    placeholder: "Select partner role(s)",
    closeOnSelect: false,
    });});  
        ]]>
    </xp:this.value>
</xp:scriptBlock>

修复方案 #

针对IE的兼容性问题，通过手动扩展事件监听逻辑来修复：

$(document).ready(function() {
    var $select = x$("#{id:lstPartnerRoles}").select2({
        placeholder: "Select partner role(s)",
        closeOnSelect: false,
    });

    // 处理IE下点击外部无法关闭下拉框的问题
    $(document).on('click', function(e) {
        var $target = $(e.target);
        // 确认点击区域不在Select2容器内，且下拉框处于展开状态
        if (!$target.closest('.select2').length && $select.hasClass('select2-container--open')) {
            $select.select2('close');
        }
    });

    // 修复ESC关闭后点击页面触发下拉框重新展开的问题
    $select.on('select2:close', function() {
        // 主动移除元素焦点，避免残留的焦点状态触发意外展开
        $(this).blur();
    });
});

额外说明 #

• 若x$（XPages的jQuery别名）无法正常获取元素，可替换为标准的$
• 检查页面中是否存在其他全局点击事件，避免与该监听逻辑冲突
• 确认Select2 v4的CSS和JS资源在IE中加载正常，无加载报错或语法兼容性问题

内容的提问来源于stack exchange，提问作者Chris Richards