Hello,

I'm running into this weird bug where I want to submit a form when the user presses the enter key, but the form submission only works once when the enter key gets pressed and won't work again until I tab in and out of the desktop application. The input is required and is validated to see if the string inputted is a valid YouTube link.

The application is a desktop application using Chakra-UI, React.js, and ElectronJS. I am using react-hook-form for form validation. I honestly have no idea why this is happening and have been stuck on this for days. Any help would be appreciated. Thank you!

​

YouTubeLink.js

export default function YoutubeLink() {
  let navigate = useNavigate() // navigation function for react router

  const [link, setLink] = useState(""); // variable to hold input string

  const {
    handleSubmit, //takes as input onSubmit
    register, // function used to link an input to form state
    formState: { errors },
  } = useForm();

  const handleChange = (event) => {
    setLink(event.target.value);
  }

  const onSubmit = (values) => {
    console.log(values)
    navigate('/transcribe', {
      state: {
        videoID: getYouTubeID(link)
      }
    })
  }

  const onError = (e) => {
    console.log('Error occured: ', e)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit, onError)}>
      <FormControl isInvalid={errors.link}>
        <InputGroup width="lg">
          <Input
            id="link"
            {...register("link", {
              required: {
                value: true,
                message: "This is required."
              },
              validate: (link) => matchYouTubeURL(link) || "Invalid YouTube Link"
            })}
            pr="4.5rem"
            type="text"
            value={link}
            onChange={handleChange}
            placeholder="YouTube Link"
          />
          <InputRightElement width="4.5rem">
            <Button h="1.75rem" mr="8px" size="sm" type="submit">
              Submit
            </Button>
          </InputRightElement>
        </InputGroup>
        <FormErrorMessage>
          {errors.link && errors.link.message}
        </FormErrorMessage>
      </FormControl>
    </form>
  );
}