Extjs Tagfield：如何通过在IE11中单击其标签来关闭其列表？

Question

如何通过在Internet Explorer 11中单击其标签来关闭Ext.js 6.0.2中的Tagfield列表？

看看小提琴来测试它。

https://fiddle.sencha.com/#fiddle/1h9n

Answer 1

首先，您需要了解更好的情况。标签字段未关闭，因为您单击了标签;它正在关闭，因为标记字段已失去焦点。在Chrome中，您可以点击代码字段外的任何位置，它会关闭 - 而不仅仅是标签上。

这反过来给出了关于发生了什么的提示 - 标记字段没有失去焦点。现在，当您查看标签HTML代码时，它配置了for属性 - 毕竟它是标签字段的标签。

事实证明，当您点击标签时，它意味着将焦点转移到相关字段。因此，在Internet Explorer中，标记字段永远不会失去焦点，因此标记字段永远不会关闭。

我认为IE在这种情况下更接近于规范的意图。但是，无论如何，如果你真的想要这种行为，你需要自己使用onclick监听器为它编写代码。

Answer 2

当有人扩展＆＃34;选择列表＆＃34;我们的标记字段，而不是标签获取onClick监听器。这个监听器会折叠选择列表＆＃34;点击tagfields标签。

listeners: {
        expand: function (field) {
            // Collapse List when click on Label
            field.getEl().el.component.labelEl.on('click', function () {
                    setTimeout(function () {
                        field.collapse();
                    }, 100);
                }
            );
        }
    }