How to mask a field with Inputmask in Vaadin 14?

General
1

I’m trying to create a mask class so that I’d be able to mask a TextField. I’m trying to use [Inpumask]
(https://github.com/RobinHerbots/Inputmask), but I’m doing something wrong.

First, I created the textfield-formatter.js file:

![textfield-formatter.js]
(https://vaadin.com/attachment/d1489893-9867-4a6d-84aa-b98716dbac12/formatterJS.png)

And then the java extension code:

![InputmaskExtension]
(https://vaadin.com/attachment/979ed4a2-a091-41e5-a16c-9ac67a898f55/extenderJAVA.png)

To extend this to the TextField I just do formatter.extend(field, ui).

When I try to type in the textField it lets me type just one character and then the field loses focus, the mask isn’t working (it doesn’t appear) after I type some characters. I’m new to Vaadin, also to JavaScript, so I think I’m missing something simple.

I’ve read about an [InputMask]
(https://vaadin.com/directory/component/inputmask) Vaadin add-on, but it doesn’t seem to work in Vaadin 14.

Thankful to any help.
18094453.png
18094456.png

2

Not an answer to your exact question, but did you already look at https://vaadin.com/directory/component/textfield-formatter ?

3

Olli Tietäväinen:
Not an answer to your exact question, but did you already look at https://vaadin.com/directory/component/textfield-formatter ?

Yes, I looked. It’s good, but Inputmask fits better for us. [TextField Formatter]
(https://vaadin.com/directory/component/textfield-formatter) is one option, but I have also to test the other option using Inputmask.

When I use the code above with an Input component (instead of TextField) it works. If I could reach the <input> element of the TextField inside the #shadow-root and mask it, would it be a good idea?

4

I guess the downside of that approach would be that you’d be ignoring the shadow dom encapsulation and accessing private parts of the component directly. Theoretically that puts you at risk of the component’s internals changing without warning, but in practice that risk is not high.

5

I found another way of doing that (reach the input element), the [TextField #281 issue]
(https://github.com/vaadin/vaadin-text-field/issues/281) shows a way to do it without ignoring the shadow dom encapsulation. So, the javascript connectedCallback() method became this:

connectedCallback() {
	super.connectedCallback();
	if (this.parentElement) {
		var im = new Inputmask(this.conf);
		im.mask(this.parentElement);
	}
}

And the extend() java method became this:

public void extend(TextField field) {
    getElement().setPropertyJson("conf", getConfiguration().toJson());
    Input input = new Input();
    input.getElement().setAttribute("slot", "input");
    input.getElement().appendChild(getElement());
    field.getElement().appendChild(input.getElement());
  }

I just created a new input element and setted a ‘slot’ attribute with value ‘input’ and masked this new input.

6

Interesting approach! Do you get the value change events from the components properly after updating the input like that?

7

Olli Tietäväinen:
Interesting approach! Do you get the value change events from the components properly after updating the input like that?

Yes, the value change listener is working. Binding the field is working too. The other attributes that the input element of the TextField normally has are also added automatically.

8

Alright, sounds good!