ExtJS 5 xtype datefield is not working when selecting month or year

Question

When clicking on the dropdown to select individual months/years the dialog disappears like I am trying to click away.

fiddle: https://fiddle.sencha.com/#fiddle/9m6

   Ext.onReady(function() {
    Ext.create('Ext.form.Panel', {
        title: 'Simple Form',
        bodyPadding: 5,
        width: 350,
        // The fields
        defaultType: 'textfield',
        items: [{
            xtype: 'datefield',
            fieldLabel: 'Start Date',
            id: 'startDate'
        }],
        renderTo: Ext.getBody()
        });
    });

This has been fixed in ExtJs 5.1.0.107

EXTJS-15968 Date Picker disappear after click on Month Picker.

http://docs.sencha.com/extjs/5.1/whats_new/release_notes.html

Answer 1

It turned out to be a bug indeed in Ext.Js v 5.0.1. http://www.sencha.com/forum/showthread.php?289825

Solution with overriding Ext.picker.Date class worked for me:

Ext.define('EXTJS-14607.picker.Date', {
    override: 'Ext.picker.Date',


    runAnimation: function(isHide) {
        var me = this,
            picker = this.monthPicker,
            options = {
                duration: 200,
                callback: function() {
                    picker.setVisible(!isHide);
                    // See showMonthPicker
                    picker.ownerCmp = isHide ? null : me;
                }
            };


        if (isHide) {
            picker.el.slideOut('t', options);
        } else {
            picker.el.slideIn('t', options);
        }
    },


    hideMonthPicker: function(animate) {
        var me = this,
            picker = me.monthPicker;


        if (picker && picker.isVisible()) {
            if (me.shouldAnimate(animate)) {
                me.runAnimation(true);
            } else {
                picker.hide();
                // See showMonthPicker
                picker.ownerCmp = null;
            }
        }
        return me;
    },


    showMonthPicker: function(animate) {
        var me = this,
            el = me.el,
            picker;


        if (me.rendered && !me.disabled) {
            picker = me.createMonthPicker();
            if (!picker.isVisible()) {
                picker.setValue(me.getActive());
                picker.setSize(el.getSize());
                picker.setPosition(-el.getBorderWidth('l'), -el.getBorderWidth('t'));
                if (me.shouldAnimate(animate)) {
                    me.runAnimation(false);
                } else {
                    picker.show();
                    // We need to set the ownerCmp so that owns() can correctly
                    // match up the component hierarchy, however when positioning the picker
                    // we don't want it to position like a normal floater because we render it to 
                    // month picker element itself.
                    picker.ownerCmp = me;
                }
            }
        }
        return me;
    }
});