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

Question

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

查看 Fiddle 进行测试。

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

Answer 1

首先，您需要更好地了解发生了什么。标签字段没有关闭，因为您点击了标签；它正在关闭，因为标签字段失去了焦点。在 Chrome 中，您可以单击标签字段外的任意位置，它会关闭 - 不仅仅是在标签上。

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

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

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

Answer 2

当有人扩展我们的标签字段 "selected list" 时，标签会获得一个 onClick 侦听器。此侦听器在单击标签字段标签时折叠 "selected list"。

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

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

Extjs Tagfield: How to close its list by clicking on its label in IE11?

extjs

internet-explorer-11

extjs6