Enhancement - Lazy Masking Option

[aaronhargrove-grub]

Describe the issue and the actual behavior

Hey! Love the library, I just have one use case that isn't quite covered. When using masking, I'd like the ability to "partially" apply the mask, so I can only show the automatically added characters up to the point the user has typed. #392 Illustrated the problem, but it also applies to regular inputs when I don't want the non-numerics to show before they have to.

Describe the expected behavior

If a prop like lazy is passed, the formatted output would only include the format up to the point the user has typed.

For example. If the user has typed "123456", mask char is '_', and the pattern is "(###) ###-####". The expected output would be like:

• Current behavior: "(123) 456-____"
• New lazy behavior: "(123) 456"

And possibly even an option for being eager about including the next character?

• Lazy and eager: "(123) 456-"

Thanks!

[nikhil-varma]

Hi @aaronhargrove-grub
Thanks for the suggestion and I fully understand the use-case. However, initial impression would be that it is a feature that may not be possible to cater. Nevertheless, I will have an internal discussion and post an update. I will go one step ahead and convert this issue into a discussion so that it can be taken up separately.

Thanks in advance

[aaronhargrove-grub]

I did manage to get a solution going on my end in the meantime with NumberFormatBase - not sure it would work with all features of the library, but does for what I was trying to do:

export function formatLazily(
  newValue: string,
  params: { format: string; patternChar: string; eager: boolean }
): string {
  // Get the index of the last format char that correlates to the users's input. Go one past if we're eagerly inserting characters
  let endOfSlice = indexOfNthFormatCharacter(
    params.format,
    params.patternChar,
    newValue.length + Number(params.eager)
  );
  // If it doesn't exist, its because we exceeded the number of pattern chars in the format string. Take the whole format
  endOfSlice = endOfSlice > -1 ? endOfSlice : params.format.length;

  // Take only the portion of the format string that fits the current input.
  const lazyFormatString = params.format.slice(0, endOfSlice + Number(!params.eager));

  return patterFormatter(newValue, {
    format: lazyFormatString,
    patternChar: params.patternChar,
    allowEmptyFormatting: false
  });
}

[italodeandra]

However, initial impression would be that it is a feature that may not be possible to cater.

Hi @nikhil-varma, do you remember a reason why this wouldn't be possible? The NumericFormat have something similar with the thousand separator appearing only after you go past 999.