autoNumeric/vue-autoNumeric

Not working on mobile devices / userInteraction is never set to true on touch devices (iOS / Android)

Closed this issue · 3 comments

Since userInteraction is set on keydown/paste/wheel/drop and none of those are triggered on touch devices, the autonumeric behavior is strange.
It results in empty value not being set and decimals being inserted on every key, which makes it almost impossible to enter values.

The solution is actually quite simple.
userInteraction is only used in one check, that could be replaced.

current code:

if (!this.userInteraction) {
    // Make sure this is only called when the value is set by an external script, and not from a user input
    // The modification comes from a script, so we need to reformat the new value `newValue`
    if (newValue.value !== oldValue.value) {
        // Compare the 'newValue' with the current 'oldValue' so we do not `set` it again if it's not needed
        //XXX If multiple components share the same v-model, this means 'set' here will be called as many times as there is an input that is not being used by a human interaction
        this.anElement.set(newValue.value);
    }
}

solution:

if (this.anElement.getNumber() !== newValue.value) {
    // Make sure this is only called when the value is set by an external script, and not from a user input
    // The modification comes from a script, so we need to reformat the new value `newValue`
    if (newValue.value !== oldValue.value) {
        // Compare the 'newValue' with the current 'oldValue' so we do not `set` it again if it's not needed
        //XXX If multiple components share the same v-model, this means 'set' here will be called as many times as there is an input that is not being used by a human interaction
        this.anElement.set(newValue.value);
    }
}

userInteraction can therefor be removed completely.

Thank you for reporting this.

I'll check that tomorrow, but from the top of my head, userInteraction is needed in order to detect if a v-model change is done programatically, so this shouldn't be removed otherwise it's probable there will be a loss in functionality.

The easiest fix would be to add the touch* events handlers. I'll see later!

No problem, I do like your package so a fix would be nice :)

The way I see it, the check to see if v-model change is done programatically or by the user, do not need the userInteraction. Checking if the element this.anElement is in sync with newValue will provide the same result. If they are in sync it means the user provided the input. If they are not in sync, the change happend programatically.

Relying on touch events to set userInteraction could be an option, but I've had no luck with that approach. Handling of touch events is done very differently a cross devices.

I look forward to see your solution. Let me know if I could be at help testing it.

Thank you again for your proposition @markRosenvinge, it works great and it's much simpler that way :)

It's now live in v1.2.2.
Please try on Android and report here if there are still any problems!