In IE11, some components do not lose their focusCls after being clicked twice.

Two cases where i can reproduce this:

Ext JS Kitchen Sink - Core Features - Basic Grid:

  • Click on the Company grid column header (or any other);
  • Click on it again (don't doubleclick);
  • Select a row in the grid.

The Company grid colum header still shows the focus border.

Ext JS Kitchen Sink - Number fields with spinner:

  • Click the input element of the first number field, as if you're going to enter a value. The text cursor appears;
  • Click on the border of the input field. This is a very precise action!
  • The text cursor disappeared and you can no longer enter a value by keyboard, but the focus border is still present.

I've seen this in our own application too, in a specific case i'm not going to get into here. After adding some debugging listeners to the global focus event, i've noticed that IE11 shifts focus to a DIV element after the second click. That DIV should not be focusable, since it's not naturally focusable and it does not have a tabindex value. This seems like an IE11 bug.

Chrome, FireFox and Edge do not have this problem.