ariovistus/aurelia-mask

After applying mask on input, change listener no longer works

Closed this issue · 9 comments

<input
  class="form-control"
  type="text"
  masked="value.bind: item.quantity; mask: 99; placeholder: space"
  change.trigger="updateTotal()"
  data-validate="quantity"
  data-validate-max="10" />

updateTotal() no longer works...
I have tried this, but no success:

masked="value.bind: item.quantity; mask: 99; placeholder: space; change.trigger: updateTotal()"

What exactly are you expecting here? I assume user enters "12", then item.quantity gets updated to "12", then updateTotal() gets called and is free to do whatever with item.quantity="12". Are you expecting old and new values to be passed to updateTotal?

You have exactly described my expectation. The problem is that the variable that represents my total on template is not updated with the new result calculated by updateTotal() because updateTotal seems not to be called when input changes. Since I remove masked attribute and let just value.bind="item.quantity" on input, everything works fine.

ok. which browser are you using? (experience has taught me to be very very wary of change.trigger and change.delegate)

I understand. Listening for change is something that always suggest me unnecessary waste of resources, but I have no other idea on how calculate that total some way other than listening the change on inputs.

Here it is:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36

looks like change.trigger works concomitantly with value.bind, which we don't want anywhere near masked input. I would suggest BindingEngine.propertyObserver, except I just tried that, and it triggers infinite loops. It wouldn't do exactly the same thing anyways; change.trigger seems to be a blur event; the effect of propertyObserver would be more similar to a keydown event.

Looks like we will need to implement our own change notification.

1.4.0 has a custom change notifier. See if that will work for you

Thanks buddy 👍
I will give it a look

no complaints? must've worked.

I use this solution value.bind="markupBlock.hourEnter & validate" masked="mask: 99:99"