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

问题

How to close the list of a Tagfield in Ext.js 6.0.2 by clicking on its label in Internet Explorer 11?

Look into the Fiddle to test it.

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

回答1:

First, you need to understand what's going on better. The tag field isn't closing because you clicked on the label; it's closing because the tag field has lost focus. In Chrome, you can click anywhere outside of the tag field and it will close - not just on the label.

This in turn gives a hint as to what's going on - the tag field isn't losing focus. Now, when you look at the label HTML code, it's configured with a for attribute - it's the label for the tag field, after all.

And it turns out that when you click on a label, it's meant to transfer focus to the associated field. So, in Internet Explorer, the tag field never loses focus, so the tag field never closes.

I'd argue that IE is closer to the intent of the spec in this situation. But, in any case, if you really want this behaviour, you'll need to code it yourself with an onclick listener for the label.

回答2:

When somebody expands "selected list" of our tagfield, than the label gets a onClick Listener. This listener collapses the "selected list" on click on the tagfields label.

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

来源：https://stackoverflow.com/questions/39663871/extjs-tagfield-how-to-close-its-list-by-clicking-on-its-label-in-ie11