Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Formatting with custom separator doesn't work after 3.28.0 #67

Open
majed-badawi-condo opened this issue Feb 8, 2024 · 1 comment
Open

Comments

@majed-badawi-condo
Copy link

majed-badawi-condo commented Feb 8, 2024

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.

@razvaniacob
Copy link

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants