using pattern mask, format character is not applied if it's the last character in pattern

[showell215]

Describe the bug
If I have a simple pattern like mask: "00'" (two numbers plus '), the ' character does not get appended after typing the two numbers. Instead I have to input a 3rd character for it to be applied, which a user would not expect to be required.

lazy: false is not ideal for my use case.

To Reproduce
Simple example here

Expected behavior
After inputing two valid characters and reaching the end of the input, any remaining format characters are applied.

Environment:

• OS: any
• Browser: any
• Version [e.g. 22
• IMask version: 6.2.2
• Framework/plugin version if used: React, but tested on vanilla as well

Additional context
Thanks for all your work on this library!

[uNmAnNeR]

for now i can only suggest something ugly like https://jsfiddle.net/x8dnmqju/1/
but i am working on better solution

[showell215]

@uNmAnNeR thanks for the example. I'll explore using that workaround for the time being.

[uNmAnNeR]

@showell215 give a try eager: true on latest 6.3.0-alpha.0

[showell215]

Thanks @uNmAnNeR – eager works great with a fixed pattern.

It does not work quite as expected if my pattern includes optional characters like in this example. Would it be possible to have eager formatting respect those optional characters?

[uNmAnNeR]

hey!
imagine the case where
mask: '0[0]"0'

for now if i input the value will be:

1|
12"|
12"3|

if eager should not consider optionals as you suggest then there are two ways:

1"|
1"2|

1|"
12"|
12"3|

First is not a solution because optionals should not be skipped until user wants to do it.
Second could be a solution but i don't like how fixed part appears at front of the input position. Looks strange.

I suggest you to use dynamic mask for your case https://jsfiddle.net/f0pqL71o/

It does not work right now (haha, sorry) but i will fix it soon.

[uNmAnNeR]

@showell215 please check on v6.4.1-alpha.0 solution using dynamic mask

[showell215]

Hi @uNmAnNeR – thanks for sharing this solution. It does work in 6.4.2 with imask, but when I use the same mask options with useIMask, the fixed part is not added. I'm sorry I don't have a JSFiddle or Codepen to share– I was unable to get react-imask to work using unpkg in those environments. I can reproduce this with this simple example with [email protected]:

const MaskedTextInput = () => {
  const [value, setValue] = useState('');

  const { ref } = useIMask(
    {
      mask: [
        { mask: '0"', eager: true },
        { mask: '0[0]"', eager: true }
      ]
    },
    {
      onAccept: (maskedValue) => {
        setValue(maskedValue);
      }
    }
  );

  return (
    <>
      <input
        value={value}
        ref={ref}
      />
    </>
  );
};


export default MaskedTextInput;