Disable the space button while on IME composition mode

40 views Asked by At

In a React TypeScript project, I am trying to disable a text input via the following

<TextInput
  onKeyDown={(e) => preventSpaces(e)
  ...props
/>

Where as the preventSpaces function is as follows

const WHITESPACE_CHARS = ['\u{0020}', '\u{00A0}', '\u{2009}', '\u{3000}'];

const preventSpaces = (e: React.KeyboardEvent<HTMLInputElement>) => {
  if (WHITESPACE_CHARS.includes(e.key)) {
    e.preventDefault();
  }
};

This works fine however when I'm typing in the Japanese IME mode, clicking the space bar gives an e.key of Process. Hence, the space button/a whitespace is not disabled at all.

0

There are 0 answers