maximbalaganskiy / aurelia-inputmask Goto Github PK

Found another issue.
When I have multiple masks on an dialog I am masking it appears that only the first one is being initialized and used correctly.

If I remove the other inputs and test them one by one they work correctly so seems there is something being used statically/globally in the attribute versus per input instance.

Looking to see if I can figure it out.

The optionsStore which holds global options is being populated with options passed in through the custom attribute binding. It seems to be because the inputmask library extends both the mask and the options into a singular object, which then traverses all the way back upward and into the optionsStore.

You can reproduce it with the following (this example using the materialize bridge, but can be done with a normal input too):

<md-input type="tel" placeholder="____" inputmask="mask: [9999]; value.bind:PhoneExtension; options.bind: { jitMasking: false }"></md-input>

This ends up creating a singular object that looks something like

{
  alias: '[9999]',
  jitMasking: false
}

...which will permanently set that alias and jitMasking for all subsequent inputmasks.

I have a solution for the problem and I can submit a PR if needed. Simply, create a copy of the options passed in to the Inputmask constructor and it will break the reference back to optionsStore.

There is a compatibility issue with IE11 when the change event is fired. It causes a "Object doesn't support this action" exception.

See: https://stackoverflow.com/questions/27176983/dispatchevent-not-working-in-ie11

File: inputmask.attribute.ts

Current code:

this.input.dispatchEvent(new Event("change"));

Suggested Fix:

// ie compatibility
var event;
if (typeof(Event) === 'function') {
     event = new Event("change");
}
else {
     event = document.createEvent('Event');
     event.initEvent('change', true, true);
}
// end ie compatibility

this.input.dispatchEvent(event);

The change appears to resolve the issue in my case. I'm not sure if the parameters for bubble and cancelable match the project paradigm or not.

Getting the noted error in inputmask-attribute on the line indicated by -->
Is it expecting an additional element?

valueChanged() {
		if (!this.input) {
			return;
		}
		if (this.ignoreChange) {
			this.ignoreChange = false;
			return;
		}
		if (this.input.value !== this.value) {
			this.input.value = this.value;
		}
		const label = this.input.nextElementSibling as HTMLLabelElement;
-->		if (label.nodeName === "LABEL") {
			label.classList.add(this.value ? "active" : "inactive");
		}
	}

Here is an example of how I am using it:

<div class="textareasize">
          <input inputmode="numeric" pattern="^[0-9]*$" class="smalltextinput" value.bind="radial"
            inputmask data-inputmask-regex="^\d{3,3}$"> [ex: 030, 281]
</div>

Hi, thank you for your work!
I am trying to use this plugin but I am getting an error on console.
All I did was install it using npm according to the docs, configure the plugin on my main.ts and use it on an input like this:

<input type="text" class="form-control" value.bind="myValue" inputmask="999.999.999-99" />

The error is:

Uncaught TypeError: inputmask_1.default is not a constructor
    at InputmaskCustomAttribute.createInstance (inputmask-attribute.ts:70)
    at InputmaskCustomAttribute.attached (inputmask-attribute.ts:62)
    at Controller.attached (aurelia-templating.js:3799)
    at View.attached (aurelia-templating.js:1812)
    at ViewSlot.attached (aurelia-templating.js:2170)
    at View.attached (aurelia-templating.js:1817)
    at ViewSlot.attached (aurelia-templating.js:2170)
    at View.attached (aurelia-templating.js:1817)
    at ViewSlot.attached (aurelia-templating.js:2170)
    at View.attached (aurelia-templating.js:1817)
    at ViewSlot.add (aurelia-templating.js:1975)
    at If._show (if-core.js:66)
    at If._update (if.js:104)
    at If.conditionChanged (if.js:90)
    at BehaviorPropertyObserver.selfSubscriber (aurelia-templating.js:4009)
    at BehaviorPropertyObserver.call (aurelia-templating.js:3870)

Did I miss something?