I'm trying to make my IMask input update its value to be cleared when it is clicked but IMask is throwing a warning:

Element value has changed outside the mask. Sync the mask using mask.updateValue() for it to work correctly.

I've tried to use all of the ways I could find to update the value, such as mask.updateValue() though I still see the error.

import IMask from "imask";
import {contador} from "./lib/contador";
import {NewGame} from "./lib/novoJogo";
import {SorteioNumero} from "./lib/sorteioDoNumero";

let input = document.querySelector("#number");
const mask = IMask(input, {
  mask: Number,
  min: 0,
  max: 10,
});

input.addEventListener("click", () => {
  input.value = "";
  mask.updateValue();
}); 

I'm trying to make my IMask input update its value to be cleared when it is clicked but IMask is throwing a warning:

Element value has changed outside the mask. Sync the mask using mask.updateValue() for it to work correctly.

I've tried to use all of the ways I could find to update the value, such as mask.updateValue() though I still see the error.

import IMask from "imask";
import {contador} from "./lib/contador";
import {NewGame} from "./lib/novoJogo";
import {SorteioNumero} from "./lib/sorteioDoNumero";

let input = document.querySelector("#number");
const mask = IMask(input, {
  mask: Number,
  min: 0,
  max: 10,
});

input.addEventListener("click", () => {
  input.value = "";
  mask.updateValue();
}); 

• javascript
• html
• imaskjs

2 Answers 2

You are seeing the warning regarding the value being out of sync because you are updating the input field's value directly on the DOM element rather than using the IMask object, this updates the input field however IMask cannot see this change.

The correct way to update the value of an IMask input is to directly update the value of the .value property of the IMask object you created:

import IMask from "imask";
import {contador} from "./lib/contador";
import {NewGame} from "./lib/novoJogo";
import {SorteioNumero} from "./lib/sorteioDoNumero";

let input = document.querySelector("#number"); // This is your raw DOM element.

const mask = IMask(input, { // This is your IMask object.
  mask: Number,
  min: 0,
  max: 10,
});

input.addEventListener("click", () => {
    mask.value = ""; // Clear IMask object value.
});

See 'Get/set value and unmasked value' here: https://imask.js/guide.html#masked-base

In your case, you should just write it like this:

input.addEventListener("click", () => {
  mask.updateValue("");
}); 

instead of

input.addEventListener("click", () => {
  input.value = "";
  mask.updateValue();
});