Input breaks when using watch options and autoDecimalDigits false

[acirinelli]

Vue Currency Input version

v3.0.3

Vue version

v3.2.45

What browser are you using?

Chrome

What operating system are you using?

MacOS

Reproduction link

https://codesandbox.io/s/muddy-frost-p7qgv2?file=/src/components/VCurrencyField.vue:1006-1023

Describe your issue

When using watch options and autoDecimalDigits:false, the input behaves in a strange way where it breaks after each number press and only accepts the last number. See code sandbox for working example.

It seems to only continue working correctly if precision is set to 0.

[acirinelli]

@dm4t2 Possible solution:

setOptions function does not pass the hideNegligibleDecimalDigits to the format() function. It's always set to false.

setOptions(options) {
        this.init(options);
        this.format(this.currencyFormat.format(this.validateValueRange(this.numberValue)));
        this.onChange(this.getValue());
    }

We should pass in the option:

setOptions(options) {
        this.init(options);
        this.format(this.currencyFormat.format(this.validateValueRange(this.numberValue)), this.options.hideNegligibleDecimalDigitsOnFocus);
        this.onChange(this.getValue());
    }

[dm4t2]

Same issue as #400. You can avoid this by checking if the options have actually really changed before calling setOptions in options watcher or by using single props for each option (rather than an object for all options).

Maybe you also have an idea why the options watcher has such a weird behavior?

[acirinelli]

Same issue as #400. You can avoid this by checking if the options have actually really changed before calling setOptions in options watcher or by using single props for each option (rather than an object for all options).

Maybe you also have an idea why the options watcher has such a weird behavior?

As far as I can tell it's because of the way this function is defined and the second parameter is always false: format(value: string | null, hideNegligibleDecimalDigits = false)

setOptions needs to pass it in, see comment above. I made that change in my fork and it works perfect.