Trying to prevent the default behavior of clicking and focusing on an input. I understand that I can use CSS to prevent this (pointer-events: none). I am eventually trying to prevent clicking on input at certain caret positions.

Is there an explanation as to why e.preventDefault() isn't working in this situation?

import React from "react";

function InputText() {

  function handleClick(e) {
    e.preventDefault();
  }

  return (
    <input onClick={handleClick}></input>
  );
}

export default InputText;