Workaround for picker selection bugs

[cyee]

Several people have reported a bug in the picker in 2.2.0 (and also 2.1.1?) where you can't select the last item.

A related bug occurs when you have a bunch of items in a slot (we have about 82) and listen to the change event. The event listener is being passed an incorrect value.

There is confusion on the first bug, because some people are reporting that it occurs only in desktop Chrome, while others are reporting it on devices. We are able to replicate the problem on devices.

I found that the following workaround fixes both problems on devices (but not on desktop Chrome).

First, set an itemCls on the slot. Let's say it's 'ABCD-item-cls'.

Then add the following to your SASS and compile:

.ABCD-item-cls {
    height: 2.5em !important;
}

[Kurt001]

That would be for me:
.x-picker-slot .x-dataview-item {
height: 2.5em !important;
}

But still its jumping inside chrome.

[cyee]

Post your full code

[Kurt001]

You asked for some code:

        
        data = //some data
        title = 'Choose this';
        slots = [{
            name: 'slotname',
            title: title,
            data: data,
            value: 200 //is a valid value
        }]; 
        var .picker = Ext.create('Ext.Picker', {
            action: 'ExamplePicker',
            doneButton: Ext.MessageBox.OK,
            cancelButton: Ext.MessageBox.CANCEL,
            useTitles: !!title,
            height: '13em',
            slots: slots,
            listeners: {
                change: callback.change,
                pick: callback.pick,
                cancel: callback.cancel
            }
        });


        // Add and show
        Ext.Viewport.add(picker);
        picker.show();

[cyee]

Add an itemCls to your slot:

        
        data = //some data
        title = 'Choose this';
        slots = [{
            name: 'slotname',
            title: title,
            data: data,
            itemCls: 'slot-item-cls',
            value: 200 //is a valid value
        }]; 
        var .picker = Ext.create('Ext.Picker', {
            action: 'ExamplePicker',
            doneButton: Ext.MessageBox.OK,
            cancelButton: Ext.MessageBox.CANCEL,
            useTitles: !!title,
            height: '13em',
            slots: slots,
            listeners: {
                change: callback.change,
                pick: callback.pick,
                cancel: callback.cancel
            }
        });


        // Add and show
        Ext.Viewport.add(picker);
        picker.show();

Now in your CSS, add:

.slot-item-cls {
    height: 2.5em !important;
}