uNmAnNeR / imaskjs

vanilla javascript input mask
https://imask.js.org
MIT License
4.97k stars 258 forks source link

Number mask: Unexpected decimal reflected with Vue 2 #472

Closed ReVoid closed 2 years ago

ReVoid commented 3 years ago

Reproduce:

  1. Set fixed fraction amount (2 for example)
  2. Try to enter more then 2 fraction digits
  3. See that everything looks as expected, 3rd digit not appeared
  4. Check bounded value, there is an unexpected fraction digit
  5. Try to start entering from 0 and then any digits (01 for example)
  6. reflects 0, but showed only 0

Here is the code to reproduce: Template:

<div id="app">
   <input ref="input" v-model="value">
   {{ value }}
</div>

script

new Vue({
  el: '#app',
  data() {
    return {
      value: '1 000,123'
    }
  },
    mounted(){
        let mask = IMask(this.$refs.input, {
            mask: Number,
        thousandsSeparator: ' ',
        radix: ',',
        mapToRadix: ['.'],
        scale: 2,
        normalizeZeros: true,
        signed: false,
        min: 0,
        });
    },
});

JSFIddle demo

bfeister commented 3 years ago

I'm seeing a similar problem on the React plugin side. When I try to mask <num> % and include decimals, you can see the cursor shift to the right of the % symbol (which I know from tinkering with the library is indicative of a problem, the cursor should not jump when working properly)

https://codesandbox.io/s/hungry-cerf-nkuh6?file=/src/App.js

uNmAnNeR commented 2 years ago

in Vue3 you can use other event then 'input' to update the model. In Vue2 probably it just does not work