Bug in FF for type="number" component

[Julia-Lavrova]

Case: paste code with space at the end of the string
1234
all string pasted in first input.
It is look like this:

or this:

[etheran]

silly work-around I'm using:

filterKeyCodes = [65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90,
    107, 109, 110, 111, 186, 187, 188, 189, 190, 191, 192, 219, 220, 221, 222];

  renderCodeInput = () => {
    const { dispatch } = this.props;

    return (
      <ReactCodeInput
        filterKeyCodes={this.filterKeyCodes}
        className="ht-tfa-secret-input"
        onChange={value => dispatch(change('secretForm', 'secret', value))}
        fields={6}
        type="text"
        inputStyle={{}}
      />
    );
  }

[MarioRinaldi]

another aproach:

const symbols = ['?', '!', '@', '#', '$', '%', '&', '*', '(', ')', '[', ']', '{', '}', ', '.', ';', ':', '/', '<', '>', '-', '_', '=', '+', '¨', '~', '^', '´', '`', '°', "'", '"', '¬', '¢', '£', '₢', '¹', '²', '³', '\\', '|'];
const letterLower = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'á', 'ã', 'â', 'à', 'ä', 'é', 'ê', 'è', 'ë', 'í', 'ì', 'ï', 'ó', 'õ', 'ô', 'ò', 'ö', 'ú', 'û', 'ù', 'ü', 'ñ', 'ç'];
const letterUpper = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'Á', 'Ã', 'Â', 'À', 'Ä', 'É', 'Ê', 'È', 'Ë', 'Í', 'Ì', 'Ï', 'Ó', 'Õ', 'Ô', 'Ò', 'Ö', 'Ú', 'Û', 'Ù', 'Ü', 'Ñ', 'Ç'];

<ReactCodeInput filterChars={[...symbols, ...letterLower, ...letterUpper]} />

[acusti]

i believe this bug is not actually specific to firefox (same in chrome/safari) and, at least in my testing, it is only triggered when passing type="number" as props.

i made some changes to fix the behavior (and generally improve paste behavior, especially when type="number"). you can try it out via npm i @acusti/react-code-input or yarn add @acusti/react-code-input.