62581

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

Question:

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.

<a href="https://fiddle.sencha.com/#fiddle/1h9n" rel="nofollow">https://fiddle.sencha.com/#fiddle/1h9n</a>

Answer1:

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 <em>for</em> 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.

Answer2:

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); } ); } }

Recommend

  • How to change default stop edit behavior in jtable
  • Dependable views in Ember
  • IE11 textarea loses focus if another textarea is disabled
  • Specify HTTPS for custom WCF Binding
  • change color of jstree node
  • Avoid registering duplicate broadcast receivers in Android
  • Java making confirming exit
  • Making Google Visualization - Annotation Chart to work in GWT
  • Outlines on links in IE9 remains when focus is changed
  • How to getText() from the input field of an angularjs Application
  • Subclassing QGraphicsItem prevents me from being able to use itemAt() on a QGraphicsScene/View
  • Selenium to click on a javascript button corresponding to a text
  • How can I set a binding to a Combox in a UserControl?
  • Is playing sound in Javascript performance heavy?
  • Detect when Facebook like button is clicked
  • Textfile Structure (tables)
  • Installing Apache MyFaces 2 on WildFly 8.2.0
  • Chrome doesn't support silverlight anymore? How to solve this?
  • Using jQuery closest() method with class selector
  • Get one-time binding to work for ng-if
  • Disabling Alt-F4 on a Win Forms NotifyIcon
  • Retrieving value from sql ExecuteScalar()
  • Ajax jQuery multiple calls at the same time - long wait for answer and not able to cancel
  • Array.prototype.includes - not transformed with babel
  • Volley JsonObjectRequest send headers in GET Request
  • Javascript convert timezone issue
  • Importing jscolor library in angular 2
  • How to get icons for entities from eclipse?
  • KeystoneJS: Relationships in Admin UI not updating
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • Acquiring multiple attributes from .xml file in c#
  • Why can't I rebase on to an ancestor of source changesets if on a different branch?
  • Hits per day in Google Big Query
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • How can I remove ASP.NET Designer.cs files?
  • JaxB to read class hierarchy
  • Checking variable from a different class in C#
  • Easiest way to encapsulate a HTML5 webpage into an android app?
  • java string with new operator and a literal