Remember me and Accept terms not clickable in Safari iOS 11

[ph4r05]

Remember checkbox on login screen and Accept terms checkbox on Register screen is not clickable/checkable in Safari iOS 11 - onClick event is not propagated to the handler.

Detailed description

[BUG]: Remember checkbox implemented by iCheck does not work in Safari iOS 11, using Vue login form. The element is not clickable, cannot be checked.

I think the problem culprit is similar to one described in this StackOverflow issue

The onClick event does not get propagated to the iCheck event handler. The following workarounds does not work:

• adding cursor: pointer
• adding empty onClick="" to the label

I spent hour debugging it via Remote Safari inspection with no success. I could only get touchend events, but not click events. I think the problem has to be fixed in the iCheck directly.

Context

The UX of the remember checkbox is very frustrating.

Registration does not work completely as user cannot accept terms and conditions - blocker.

Possible implementation

I suggest migrate away from 3 years unmaintained project to more Vue native project vue-js-toggle-button. This one works very well with Vue, no JQuery initialization is needed. I tested it and it works fine both on desktops and mobile devices.

Install:

npm install vue-js-toggle-button --save

The <template> part:

<div class="toggl-box">
  <label>
    <toggle-button @change="onChkChange" id="chk-remember" color="#00a7d7"
    ></toggle-button> Remember me
  </label>
</div>

The script part:

  import ToggleButton from 'vue-js-toggle-button';
  import Vue from 'vue';

  Vue.use(ToggleButton);

New method is needed as model does not play well with Laravel, i.e. setting model form value to false will still take checkbox as checked, it has to be '' (empty string).

onChkChange(evt){
  this.form.terms = evt.value ? true : '';
},

initializeIcheck.js is not needed anymore.

The case with register checkbox is a bit more complicated. The potential form.errors for terms has to be cleared somehow.

I tried programatical clearing on the state change of the check box, but it did not work out of the box because of the Errors.js method clear uses delete operator which makes troubles to Vue to detect changes via reactivity. The workaround is to use Vue.delete(obj, key) method to delete the error (object attribute) so Vue can detect the change and update the UI.

onChkChange(evt){
            this.form.terms = evt.value ? true : '';
            if (evt.value) {
                Vue.delete(this.form.errors.errors, 'terms'); // reactivity fix
            }
      },

Your environment

• iOS 11.1.1
• Safari
• Vue v2.5.2

[acacha]

Sorry I'm so busy lately... I will check as soon as I can but maybe you could help creating a PR with your implementation please?

[ph4r05]

@acacha I will take a look, thanks