REQUIRED INFORMATION

Ext version tested:
  • Sencha 2.1.1
Browser versions tested against:
  • Chrome (Windows 7)
  • Safari (iPad OS 6)
Description:
  • In multiselects, clicking directly on the check of a selected item doesn't deselect the item, while clicking anywhere else on the item does.
Steps to reproduce the problem:
  • Create any multiselect list, select an item, then try clicking on the check.
The result that was expected:
  • Clicking on the check should deselect the item
The result that occurs instead:
  • Nothing happens
Test Case:

This is the example code for Ext.field.Select. When you open up the select options, clicking on the check does nothing.
Code:
Ext.create('Ext.form.Panel', {
    fullscreen: true,
    items: [
        {
            xtype: 'fieldset',
            title: 'Select',
            items: [
                {
                    xtype: 'selectfield',
                    label: 'Choose one',
                    options: [
                        {text: 'First Option',  value: 'first'},
                        {text: 'Second Option', value: 'second'},
                        {text: 'Third Option',  value: 'third'}
                    ]
                }
            ]
        }
    ]
});

HELPFUL INFORMATION

See this URL for live test case: http://docs.sencha.com/touch/2-1/#!/...t.field.Select

Debugging already done:
  • In my testing, it seems that ​-webkit-mask used to display the check on the x-list-item-inner component catches the tap event and stops it from propagating further. So the tap event shows up on the x-list-item-inner, but does not bubble up to the List's container.innerElement.
Possible fix:
These two overrides are a hack, but they seem to work:
Code:
Ext.define('Ext.dataview.component.ListItemOverride', {
    override: 'Ext.dataview.component.ListItem',


    //bubble up 'checkboxtap' event since it has to be handled separately due to a Sencha bug
    initialize: function(){
        this.callParent();


        this.enableBubble('checkboxtap');
    },


    //When a user clicks on the checkbox, the event is not caught by the list 'tap' event that is used for other clicks.
    //This is to listen for that particular tap event and pass the event up as a 'chcekboxtap'
    updateBody: function(body, oldBody) {
        this.callParent(arguments);


        var THIS = this;
        if (body) {
            body.element.getParent().on('tap', function(e, target){
                if(target.className.indexOf('x-list-item-inner') != -1){ //This element only gets the event if the checkbox is clicked on
                    THIS.fireEvent('checkboxtap', e, target);
                }
            });
        }
    }
});

Ext.define('Ext.dataview.ListOverride', {
    override: 'Ext.dataview.List',


    //since the tap listener misses the checkbox being tap, catch the custom event made to detect that event and
    //act accordingly.
    initialize: function() {
        this.callParent(arguments);


        this.on('checkboxtap', this.onItemTap);
    }
});