Currency mask stop to work on 5.0.9 with brazilian currency mask
REDIDSOFT opened this issue · 7 comments
Hello, I use this lib, for a long time and now I face this issue, in my code I use
Inputmask('currency', {
prefix: getPrefix(),
numericInput: false,
digits: digits,
rightAlign: true,
autoUnmask: false,
groupSeparator: '',
radixPoint: ',',
onBeforeMask: function (value, opts) {
if (null === value) {
// fix charAt on null errors
value = '0.00';
}
return value;
},
}).mask(inputRef.value || '');
But now, when I upgrade to 5.0.9 the cents stop to work, e.g. Here I use brazilian real then R$ 135,55 now shows 13555,00 and when I try to type the cents, the cursor goes to the value.
Can you provide a more elaborate example as I cannot reproduce.
Sure this is my component TextInput
`
<script setup lang="ts"> // import { computed } from '@vue/reactivity'; import { PropType, computed, onMounted, ref } from 'vue'; import { InputMsgError } from '@/libs/myInterfaces'; import InputMask from 'inputmask'; import { strToCurrecy } from '@/libs/FuncUtils'; import { StateType, InputType } from '@/libs/Types/types'; const props = defineProps({ /** * Nome do campo * @type {String} * @default '' */ field: { type: String, default: '', required: true, }, /** * Label do campo * @type {String} * @default '' */ label: { type: String, default: '', required: true, }, /** * Estado do campo * browse = visualizar * edit = editar * create = adicionar * execute = executar * @type {String} * @default 'browse' */ state: { type: String as PropType, default: '', required: false, }, modelValue: { type: [String, Number], default: '', required: false, }, required: { type: Boolean, default: false, required: false, }, errors: { type: Object, default: [], required: false, }, enabled: { type: Boolean, default: true, required: false, }, /** * Tipo do campo * text = texto * number = número * currency = moeda * phone = telefone * cnpj = CNPJ * cep = CEP * email = email * url = url * mask = máscara * @type {String} * @default 'text' */ type: { type: String as PropType, default: 'text', required: false, }, size: { type: Number, default: 200, required: false, }, title: { type: String, default: '', required: false, }, /** * Prefixo do campo * @type {String} * @default '' */ prefix: { type: String, default: '', required: false, }, digits: { type: Number, default: 2, required: false, }, inpsize: { type: Number, default: 0, required: false, }, mask: { type: String, default: '', required: false, }, valid: { type: Boolean, default: true, required: false, }, }); let myType = ref('text'); let digits: number = 2; const ValError = ref(''); const inputRef = ref(null); let InputValError: any; const countFocus = ref(0); const setFocus = () => { inputRef.value?.focus(); inputRef.value?.select(); if (props.type === 'currency') { const timeOutFocus = setTimeout(() => { if (countFocus.value === 0) { setFocus(); countFocus.value++; return; } clearTimeout(timeOutFocus); }, 300); } }; defineExpose({ setFocus, }); function maskTelefone() { return ['(99) 9999-9999', '(99) 99999-9999']; } function maskCNPJ() { return ['999.999.999-99', '99.999.999/9999-99']; } function maskCEP() { return ['99999-999']; } onMounted(() => { myType.value = props.type; digits = props.digits; ValError.value = ''; InputValError = props.errors; InputValError.filter((error: InputMsgError) => { let myError = error; if (myError.field === props.field && props.required == true) { ValError.value = myError.error; } }); if (myType.value === 'number') { myType.value = 'currency'; digits = 0; } if ( myType.value === 'email' || myType.value === 'cnpj' || myType.value === 'cep' ) { myType.value = 'text'; } function getPrefix() { return props.prefix !== '' ? props.prefix + ' ' : ''; } if (myType.value === 'currency') { myType.value = 'text'; Inputmask('currency', { prefix: getPrefix(), numericInput: false, digits: digits, rightAlign: true, autoUnmask: false, groupSeparator: '', radixPoint: ',', onBeforeMask: function (value, opts) { if (null === value) { // fix charAt on null errors value = '0.00'; } return value; }, }).mask(inputRef.value || ''); } else if (props.type === 'phone') { //@ts-ignore InputMask(maskTelefone()).mask(inputRef.value || ''); } else if (props.type === 'cnpj') { //@ts-ignore InputMask(maskCNPJ()).mask(inputRef.value || ''); } else if (props.type === 'cep') { //@ts-ignore InputMask(maskCEP()).mask(inputRef.value || ''); } else if (props.type === 'email') { InputMask('email').mask(inputRef.value || ''); } else if (props.type === 'url') { InputMask('url').mask(inputRef.value || ''); } else if (props.type === 'mask') { InputMask(props.mask).mask(inputRef.value || ''); } }); const emits = defineEmits(['update:modelValue', 'onExit']); const onExit = (element: any) => { emits('onExit', element.target.value); }; const onClick = (element: any) => element.target.select(); const value = computed({ get() { return props.modelValue; }, set(val) { if (props.type === 'currency') { val = strToCurrecy(val); } if (props.type === 'number') { val = +val; } if (props.type === 'cnpj') { val = val.replace(/\D/g, ''); } emits('update:modelValue', val); }, }); function getValidationMsg() { if (ValError.value !== '') { return ValError.value; } if (props.required == true && ValError.value === '') { return '( ! )'; } else { return ''; } } function getDisabled() { const state = props.state; const enabled = props.enabled; const disabled = state == 'browse' || enabled == false; return disabled; } function getInputClass() { let myclass = 'text-input'; if (props.enabled == false) { myclass += ' font-bold bg-gray-200'; } if (props.valid === false) { myclass = myclass.replace('text-input', 'text-input-error'); } return myclass; } </script>`
I was having the same issue, coming from 3.3.11 to 5.0.9.
Found out that <= 4.0.2 works but from 4.0.3 don't work.
Edit: Actually my problem is when I programmatically fill a input.
Even with no custom configuration, when I set the input value e.g: $(".input").val(100.22) it should be 100,22 but show 10022,00. It started on version 4.0.3;
Edit 2: Sorry, I compare the version tags and saw about the new inputType property. I set to inputType: "number" and fix my issue.
See previous comment and have a read at https://robinherbots.github.io/Inputmask/#/documentation/numeric#inputtype
Hope this solves your issue
Hello, I will try tomorrow, tnx.
See previous comment and have a read at https://robinherbots.github.io/Inputmask/#/documentation/numeric#inputtype
Hope this solves your issue
Hello everyone! I finally figured out what is going wrong, setting the value to currency, and passing the value stored in the database for example 100.00 up to version 5.8 if I set the field like this:
Inputmask('currency', {
prefix: getPrefix(),
numericInput: false,
digits: digits,
rightAlign: true,
autoUnmask: false,
groupSeparator: '',
radixPoint: ',',
onBeforeMask: function (value, opts) {
if (null === value) {
// fix charAt on null errors
value = '0.00';
}
return value;
},
}).mask(inputRef.value || ''); Passing the radixPint as a comma, it automatically understood this as a decimal separator after the change in the version, passing a value of 100.00 it puts 10000.00 then I set the radixPint to a period it understands it in the "correct" way, is there any way to show the decimal separator as a comma passing values in US standard with a period in the decimal and the component understands this?
Thank you very much in advance.