Alphanumeric entries on mobile

[kalithedev]

With the current implementation, on moible it doesn't allow you to enter alphanumeric codes and only opens the number keyboard.

Request: create a prop that allows you to input alphanumeric entries on mobile.

[guilhermerodz]

Hey, it actually allows alphanumeric on mobile. Just check the docs:

// Virtual keyboard appearance on mobile
  // Default: 'numeric'
  inputMode?: 'numeric' | 'text' | 'decimal' | 'tel' | 'search' | 'email' | 'url'

[schwjustin]

I can set inputMode to text but when I try typing a letter on desktop nothing happens

[OliverGeorge8]

I can set inputMode to text but when I try typing a letter on desktop nothing happens

same issue

[markcnunes]

I can set inputMode to text but when I try typing a letter on desktop nothing happens

For the time being, I am using this workaround.

        inputMode="text"
        onChange={onChange}
        onPaste={(e) => {
          e.preventDefault();
          if (onChange === undefined) return;
          const value = e.clipboardData.getData('text').trim();
          onChange(value);
        }}
        onKeyUp={(e) => {
          e.preventDefault();
          if (onChange === undefined) return;
          const key = e.key;
          if (key === EventKey.Backspace) {
            onChange(value.slice(0, -1));
            return;
          }
          const isLetterOrNumber = /^[a-zA-Z0-9]$/.test(key);
          if (!isLetterOrNumber) return;
          onChange(value + key.toLocaleUpperCase());
        }}

[guilhermerodz]

I'm sorry about this issue @markcnunes @KhalilJouaneh @schwjustin @dannyDNS @OliverGeorge8

The docs never mentioned the input uses a regex pattern by default, which is a predefined string you can import from the library as well (REGEXP_ONLY_DIGITS)

The library is shipped with those helpers so that you can allow any predefined regexp, or even enter your own pattern prop.

export const REGEXP_ONLY_DIGITS = '^\\d+$'
export const REGEXP_ONLY_CHARS = '^[a-zA-Z]+$'
export const REGEXP_ONLY_DIGITS_AND_CHARS = '^[a-zA-Z0-9]+$'

Use <InputOTP pattern="..."> to achieve any pattern you want.

---

I'm now planning to add this information to the docs in 1.2.5, too.