带有Select2的标准列表框。
在Chrome中，点击会打开下拉菜单，点击下拉菜单外部会将其关闭。
在IE中，点击外部不会关闭下拉菜单，必须先选择其中一个值，才会在点击外部时关闭。
你可以用ESC关闭下拉框，但随后在页面上的任意位置点击都会重新触发下拉。
Select2 v4，有什么想法欢迎分享？

<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>

<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>

解决方案

For anyone who's interested/has a similar issue, my resolution is as follows:

containerClicked flag — 通过对文档的mousedown事件来跟踪用户是否真正点击了Select2容器，从而阻止页面上其他元素触发重新打开

justClosed flag — 阻止IE在未选择任何值时造成的即时重新打开，并设定500ms的冷却时间

Transparent overlay — 位于下拉菜单后方，拦截外部点击，整洁地将其关闭

XSP.addOnLoad — 确保在页面发生局部刷新后，所有内容能够正确重新初始化

<xp:scriptBlock>
    <xp:this.value><![CDATA[

    function initPartnerRolesSelect2() {
        var $el = x$("#{id:lstPartnerRoles}");
        var justClosed = false;
        var containerClicked = false;

        if ($el.hasClass('select2-hidden-accessible')) {
            $el.select2('destroy');
        }
        $el.off('select2:open select2:close select2:opening');

        $el.select2({
            placeholder: "Select partner role(s)",
            closeOnSelect: false,
        });

        // Track whether the Select2 container was actually clicked
        $(document).on('mousedown.select2Track', function(e) {
            var target = e.target || e.srcElement;
            containerClicked = $(target).closest('.select2-container').length > 0;
        });

        $el.on('select2:opening', function(e) {
            if (justClosed || !containerClicked) {
                e.preventDefault();
            }
        });

        $el.on('select2:open', function() {
            justClosed = false;
            containerClicked = false;
            $('#select2Overlay').remove();
            $('<div id="select2Overlay"></div>').css({
                position: 'fixed',
                top: 0,
                left: 0,
                width: '100%',
                height: '100%',
                zIndex: 999,
                background: 'transparent'
            }).appendTo('body').on('click mousedown', function() {
                $('#select2Overlay').remove();
                justClosed = true;
                $el.select2('close');
                setTimeout(function() {
                    justClosed = false;
                }, 500);
            });
        });

        $el.on('select2:close', function() {
            $('#select2Overlay').remove();
        });
    }

    $(document).ready(function() {
        initPartnerRolesSelect2();
    });

    XSP.addOnLoad(function() {
        initPartnerRolesSelect2();
    });

    ]]></xp:this.value>
</xp:scriptBlock>