checkbox: Doesn't work on touch devices

[narqo]

checkbox doesn't work properly on touch devices, at least on iPad/iPhone under the iOS 8.3 as well as touch devices emulator in Chrome.

In the checkbox example it is impossible to toggle checked state by tapping on the checkbox itself. While tapping on the label text works as expected.

See ftlabs/fastclick#351 for additional details

[narqo]

Looks like there is a problem(-s) with iOS and the FastClick library (bem-core/jquery__event_type_pointerclick).

[narqo]

One possible solution, is to move checked state maintaining from change event in __control to modifier, as we do in button_type_check.

Here is the monkey-patched version with project level overrides:

modules.define('checkbox', ['i-bem__dom', 'jquery', 'dom'], function(provide, BEMDOM, $, dom) {

provide(BEMDOM.decl(this.name, {
    /** @override */
    _onChange : function() {
        this.elem('control').prop('checked', this.getMod('checked'));
    },

    _onPointerPress : function() {
        if(!this.hasMod('disabled')) {
            this.bindToDoc('pointerrelease', this._onPointerRelease);
        }
    },

    _onPointerRelease : function(e) {
        this.unbindFromDoc('pointerrelease', this._onPointerRelease);
        dom.contains(this.domElem, $(e.target)) && this._updateChecked();
    },

    _updateChecked : function() {
        this.toggleMod('checked');
    }
}, {
    live : function() {
        this.liveBindTo('pointerpress', this.prototype._onPointerPress);
        return this.__base.apply(this, arguments);
    }
}));

});

[dfilatov]

Doesn't this patching affect checkbox_type_button? What about keyboard?

[narqo]

Yep, it seems, that both keyboard and checkbox_type_button won't work with it :( Guess, we need to think about fixing FastClick problem from bem-core first