[React] Is there any way to avoid overwrite when a certain character is entered?

[DeltaSPb]

Hi!

I'm using react-imask in my project and I have a question about overwrite behavior.
My mask for the input (codesandbox link) consists of three groups and I need overwrite={true} behavior except for one case. If an input already has some value, but I need to insert an arithmetic character at the beginning of an existing string - inserting the character will overwrite the subsequent character:

2024-03-17.13.30.24.mov

Actual behavior:
123° 45′ 67.8900″ => -23° 45′ 67.8900″

Desired behavior:
123° 45′ 67.8900″ => -123° 45′ 67.8900″

Is there an easy way to make this work so that the overwrite doesn't trigger for only the case I described?

[uNmAnNeR]

hi @DeltaSPb,
well, it's a hard one.

I am going to have the ability to control overwrite from child masks in v8.
For now maybe custom dispatch could help.
Or toggle overwrite in prepareChar depending on the char. It's a dirty hack but it might help.

<IMaskInput
  mask={mask}
  overwrite={true}
  placeholder={placeholder}
  placeholderChar={placeholderChar}
  type={"text"}
  inputRef={inputRef}
  value={value}
  autoComplete={"off"}
  onAccept={onChange}
  prepareChar={(char, masked) => {
    masked.overwrite = Boolean(masked.value) || char !== "-";
    return char;
  }}
  blocks={{
    DD: [{ mask: "0[00]" }, { mask: "-0[00]" }, { mask: "+0[00]" }],
    MM: { mask: "0[0]" },
    SS: { mask: "0[0]" },
    MS: { mask: "0[000]" },
  }}
/>

[DeltaSPb]

@uNmAnNeR

Oh, thank you. It really works!
The only problem is that if the value in the first group is less than the maximum allowed (in my case - 3 numeric characters), when I add the - character, the input caret jumps to the end:

2024-03-19.22.05.52.mov

Is it possible to avoid this behavior?

[uNmAnNeR]

@DeltaSPb

// avoid recreation
function prepareChar (char, masked) {
  masked.overwrite = Boolean(masked.value) || char !== "-";
  return char;
}

<IMaskInput
  mask={mask}
  // overwrite={true} <-- remove this to skip change detection
  placeholder={placeholder}
  placeholderChar={placeholderChar}
  type={"text"}
  inputRef={inputRef}
  value={value}
  autoComplete={"off"}
  onAccept={onChange}
  prepareChar={prepareChar}
  blocks={{
    DD: [{ mask: "0[00]" }, { mask: "-0[00]" }, { mask: "+0[00]" }],
    MM: { mask: "0[0]" },
    SS: { mask: "0[0]" },
    MS: { mask: "0[000]" },
  }}
/>

[DeltaSPb]

@uNmAnNeR Thanks a lot!