Fiddle:

Run in IE11:
https://fiddle.sencha.com/#fiddle/140h

Ext version tested:

  • 5.1.2.748
  • 6.0.1.250

Browser versions tested against:
  • IE11
  • Firefox (works!)
  • Chrome (works!)

Description:
A very strange bug. Customers were complaining about empty combos. After endless days of debugging, screenshots and communication we found out it only happenend in IE11 in touch environment.
Somehow the IE11 randomly gives the picker of the combo an extremely large top position (or negative top position) around 10 million pixel.
As soon as this happened the picker will never show itself again.
This is because the getComputedStyle method in IE11 seemingly can't handle that large numbers.
The function is used inside getStyle which is used (indirectly) in setXY. Every setXY call is broken then.

Steps to reproduce the problem:
  • Have a combo box.
  • Expand it to create the picker / boundlist.
  • Collapse it and manipulate the top position.
  • Expand it again.

The result that was expected:

  • Picker is correctly aligned below/above the combo box.

The result that occurs instead:
  • Picker is not visible (inside the browser's viewport).


Fix:
Code:
Ext.define('Perbility.fix.view.BoundList', {
    override: 'Ext.view.BoundList',
    
    /**
     * if floating reset top and left position before showing the bound list.
     */
    beforeShow: function() {
        var me = this;
        
        if (me.rendered && me.isFloating()) {
            me.setStyle({
                top: '0px',
                left: '0px'
            });
        }
        
        me.callParent(arguments);
    }
});
Update:
I just found out, this may also happen with the left position. I updated the fiddle and the fix accordingly.