Formatting with custom separator doesn't work after 3.28.0

[majed-badawi-condo]

Hello, I am facing an issue with the component after upgrading from 3.27.0 to 3.28.0 where the formatting doesn't work while typing anymore.

The reason is that I'm using a custom separator and decimal props rather than the default ones.

Please find below the code sample:

<number
            class="number-input"
            :class="{ disabled: props.disabled }"
            v-model="value"
            :decimal="props.decimal"
            :separator="props.separator"
            :precision="props.precision"
            :min="props.min"
            :max="props.max"
            :suffix="props.suffix"
            :prefix="props.prefix"
            :disabled="props.disabled"
            :placeholder="props.placeholder"
            :minimum-fraction-digits="props.minimumFractionDigits"
            :null-value="null"
            :readonly="props.readonly"
            @blur="emit('blur')"
        />

export interface Props {
        modelValue?: number | string | null;
        suffix?: string;
        prefix?: string;
        precision?: number;
        separator?: string;
        decimal?: string;
        min?: number;
        max?: number;
        placeholder?: string;
        disabled?: boolean;
        readonly?: boolean;
        minimumFractionDigits?: number;
    }

const props = withDefaults(defineProps<Props>(), { precision: 2, separator: '.', decimal: ',' });

    const value = computed({
        get: () => (!isNil(props.modelValue) ? String(props.modelValue).replace('.', props.decimal) : ''),
        set: val => {
            let adjustedVal = typeof val === 'string' ? (val.length > 0 ? parseFloat(val) : null) : val;

            if (!isNil(props.max) && !isNil(adjustedVal) && adjustedVal > props.max) {
                adjustedVal = props.max;
            } else if (!isNil(props.min) && !isNil(adjustedVal) && adjustedVal < props.min) {
                adjustedVal = props.min;
            }

            emit('update:modelValue', adjustedVal);
        },
    });

For easier testing, I created two sandboxes: 3.27.0: https://codesandbox.io/p/sandbox/coders-tm-vue-number-format-3-forked-jdvj4d https://recordit.co/zIO6XtuU87 3.28.0: https://codesandbox.io/p/sandbox/coders-tm-vue-number-format-3-forked-jv8r9j https://recordit.co/XEuEVNMs6p

To reproduce the issue, start typing in the input and you'll notice that with the new version when the value reaches the fourth character it gets converted to decimal.

Thanks in advance.

[raz-iacob]

Yes, I'm facing the same problem. If I change separator to be a dot and decimal separator to be a comma, I get this problem.

Any idea how can this be solved?

Thank you for a great package!

[dipaksarkar]

#66 Duplicated

[dipaksarkar]

Check this now https://codesandbox.io/p/sandbox/coders-tm-vue-number-format-3-forked-gv9gpw