autoComplete on iOS

[artola]

The auto-complete on iOS is not properly working on v2.0.4 (but also persists in "next") when the maskChar is not null, e.g., maskChar="_".

The code shown here below should be filled with the suggestion of the received SMS: code:123456.

With maskChar={null} shows: initial (empty) then 1 2 3 - 4 5 6.

With maskChar="_" shows: initial _ _ _ - _ _ _ then _ _ _ - _ _ _.

export const Trial: React.FC = () => {
  const [value, setValue] = useState('');

  return (
    <Fragment>
      <h1>Code</h1>
      <div>
        <InputMask
          type="text"
          name="code"
          mask="9 9 9  -  9 9 9"
          maskChar="_"
          autoComplete="one-time-code"
          inputMode="numeric"
          alwaysShowMask={true}
          value={value}
          onChange={(e) => {
            console.log('setValue:', e.target.value);
            setValue(e.target.value);
          }}
        />
      </div>
    </Fragment>
  );
};

My finding is that iOS is NOT cleaning the value before start to fill it. I can see _ _ _ - _ _ _1 arriving.

This is different of what stated here:

https://github.com/sanniassin/react-input-mask/blob/1af73d764d59b39514dc40f0ec697ce76c3f335e/src/index.js#L356

@sanniassin I request your opinion about my "fix" for v2 that is just adding a few lines in the block at:

https://github.com/sanniassin/react-input-mask/blob/1af73d764d59b39514dc40f0ec697ce76c3f335e/src/index.js#L361

This just takes the char added by the autofill at the end and makes a replacement of the maskChar.

          if (
            this.maskOptions.maskChar &&
            value.length > previousValue.length
          ) {
            var char = value.substr(previousValue.length, 1);
            value = value
              .substr(0, previousValue.length)
              .replace(this.maskOptions.maskChar, char);
          }

This is a kind of hotfix for me (my project will Go live next week), but I would prefer to use upcoming v3 with this code ported somehow. If you agree about this solution, surely it can be ported to the newest hooks implementation.

Here a CodeSandbox that I used as experiment, the the dev version of this library in a file (rim.ts): https://codesandbox.io/s/rim-65rfd

[sirtakidancers]

+1