Capture TAB in a react input

react-capture-tabs.ts

function InputCaptureTabs() {
  const [input, set_input] = useState("");

  return (<Input
    multiline
    placeholder="Type some code in"
    value={users}
    onChange={(event) => set_input(event.target.value)}
    onKeyDown={(event) => {
      if (event.key === "Tab") {
        event.preventDefault();
        const start = event.currentTarget.selectionStart;
        const end = event.currentTarget.selectionEnd;
        event.currentTarget.value =
          event.currentTarget.value.slice(0, Math.max(0, start)) +
          "    " +
          event.currentTarget.value.slice(Math.max(0, end));
        event.currentTarget.selectionStart = start + 4;
        event.currentTarget.selectionEnd = start + 4;
      }
    }}
  />);
}

Here's an image of this component in action