Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

checkbox: Doesn't work on touch devices #1472

Closed
narqo opened this issue Apr 21, 2015 · 4 comments
Assignees
Labels

Comments

@narqo
Copy link
Member

@narqo narqo commented Apr 21, 2015

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 narqo added bug v2 labels Apr 21, 2015
@narqo

This comment has been minimized.

Copy link
Member Author

@narqo narqo commented Apr 21, 2015

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

@narqo

This comment has been minimized.

Copy link
Member Author

@narqo narqo commented Apr 22, 2015

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

This comment has been minimized.

Copy link
Member

@dfilatov dfilatov commented Apr 23, 2015

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

@narqo

This comment has been minimized.

Copy link
Member Author

@narqo narqo commented Apr 23, 2015

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

@narqo narqo self-assigned this Apr 24, 2015
@narqo narqo added the ready label Apr 24, 2015
@tadatuta tadatuta removed the ready label Jun 1, 2015
narqo pushed a commit that referenced this issue Jun 1, 2015
tadatuta added a commit that referenced this issue Jun 1, 2015
checkbox: Doesn't work on touch devices
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.