how to use imask react dynamic mask? error

[augustoap]

I'm trying to use these two masks according to the number of digits. Visually it works, but when I send the form, the first mask is always selected. How to solve this?

const maskOptions = {
    mask: [
      {
        mask: '(00) 0000-0000',
        overwrite: true,
      },
      {
        mask: '(00) 00000-0000',
        overwrite: true,
      },
    ],
  };

[Cleysond10]

Did you solved your problem ?

I used just like your code and it worked fine to me...

[brunotourinho]

Hey guys! I'm using Mantine as my UI library, and found a weird behavior using Imask.

Similar to happened to @Cleysond10 but related to phone numbers.

When I click out of the input (onBlur), it supress the last typed character like falling back to the first mask.

Am I missing something?

My input is defined like this:
<Input.Wrapper mt="md" label="Telefone" error={form.errors.telefone}> <Input size="xs" mb="calc(var(--mantine-spacing-xs) / 2)" component={IMaskInput} label="Telefone" mask={[{ mask: '00 0000-0000' }, { mask: '00 0 0000-0000' }] } placeholder="Telefone" {...form.getInputProps('telefone')} /> </Input.Wrapper>

[fabriciosouzza]

Same issue here, I'm using IMaskInput with react hook form controller, and for some reason i get this behavior. I read somewhere that I should use the dispatch option. Like this:

                        dispatch={(appended: any, dynamicMasked: any) => {
                          const number = (
                            dynamicMasked.value + appended
                          ).replace(/\D/g, '');

                          if (number.length > 10) {
                            return dynamicMasked.compiledMasks[1];
                          }
                          return dynamicMasked.compiledMasks[0];
                        }}

But I tried it (I don't know if correctly) and the behavior was not mask the input.

[uNmAnNeR]

Am I missing something?

you need to use onAccept event to handle changes instead of default onChange. It's described in examples here

[brunotourinho]

Hey @uNmAnNeR thanks for your quick answer.
Can I choose which mask to apply using onAccept something like @fabriciosouzza proposed?

onAccept={ (value, mask) => { if (value.length > 14) { return mask[1]; } return mask.[0]; }

[uNmAnNeR]

@brunotourinho no, it should already work fine with your existing config, you don't need custom dispatch. With onAccept you need to update your form model.

[crypticmind]

I tried react-imask and experienced the same issue of missing the last character. I had better luck with react-input-mask as suggested here.

EDIT
react-input-mask seems to be dead. I tried and also got good results with @react-input/mask