Utility for cross-platform input validations

[baldeepsingh-pantelwar]

Problem statement

• On iOS devices, the onKeyDown event bypasses the onChange event, so we need to validate on both onKeyDown and onChange for these devices
• On Android devices, number input field bypasses any restrictions to hyphens - and dots . and hence bypasses the onChange checks, for example a maximum length of 10 digits check will be bypassed, so we need global checks on onKeyDown event, which does not give access to the entire value of the input
• On macOS, the behaviour is same as iOS devices
• If we add a regex to either onChange or onKeyDown, then certain keys will be bypassed like Backspace Arrow Keys Shift Tab Ctrl + C Ctrl + V Escape Tab Enter and more

API Design Approach

Approach 1

<TextField 
  onChange={valdiate((e) => { /** any component specific logic */ }, {
    specialCharacters: false,
    numeric: false,
    emojis: false,
    maxLength: 10
  })}
  onKeyDown={valdiate((e) => { /** any component specific logic */ }, {
    specialCharacters: false,
    numeric: false,
    emojis: false,
    maxLength: 10
  })}
/>

Approach 2

<TextField 
  {...validate({
    specialCharacters: false,
    numeric: false,
    emojis: false,
    maxLength: 10
  },
  {
    onChange: (e) => { /** any component specific logic */ },
    onKeyDown: (e) => { /** any component specific logic */ }
  })}
/>

API development approach

type Options = Partial<{
    specialCharacters: boolean;
    numeric: boolean;
    emojis: boolean;
    maxLength: number;
}>;

function validate(options: Options, props?: TextFieldProps): TextFieldProps {
  const specialCharacters = "`~!@#$%^&*()_+-={}|[]\\:\"';<>?,./".split();
  const numbers = "0123456789".split();
  const alphabets = "abcdefghijklmnopqrstuvwxyz".split();
  const alphabetsCapitalized = alphabets.map((char) => char.toUpperCase()).split();

  return {
    onChange: (e) => {
      if (options.specialCharacters && specialCharacters.some((char) => e.target.value.includes(char))) {
        return e.preventDefault();
      }
      if (options.numbers && numbers.some((char) => e.target.value.includes(char))) {
        return e.preventDefault();
      }
     // rest of the validations
     props.onChange?.(e);
    },
    onKeyDown: (e) => {
      // similar to onChange, but e.target.value is not available, so do maxLength check accordingly
    }
  }
}

Test Cases

Test cases should be written thoroughly and ran across multiple platform