Почему при отправке формы не срабатывает событие submit, а вместо этого срабатывает фокус на инпут?

Question

[Fastor1us]

CRA приложение. Компонент App:

import { useState } from 'react';

function App() {
  const onEmailSubmit = (e) => {
    e.preventDefault();
    console.log('submit');
  }
  const [value, setValue] = useState('');
  function handleChange(e) {
    setValue(e.target.value);
  }

  return (
    <>
      <h2>Форма восстановления пароля</h2>
      <p>Забыли пароль? Введите email, на который вы регистрировались</p>
      <form onSubmit={onEmailSubmit}>
        <label htmlFor="email">
          Email:
        </label>
        <input type="email" id="email" name='email'
          value={value} onChange={handleChange}
        />
        <button type="submit">
          Отправить код на почту
        </button>
      </form>
    </>
  );
}

export default App;

Суть:
Если не трогать инпут и нажать кнопку, то происходит вывод в консоль, но если вести что-то в input, а затем нажать на кнопку, то onEmailSubmit не срабатывает (в консоле пусто), а вместо этого ставится фокус на input.
В чём может быть проблема?

п.с.
Если изменить кнопку:

<button onClick={onEmailSubmit} className={styles.btn}>
  Отправить код на почту
</button>

То всё заработает. Но мне хочется понять в чём причина такого поведения отправки формы

Answer 1

[Алексей Уколов]

Срабатывает браузерная валидация:

Comments

[Fastor1us]

Благодарю! Долго не мог понять в чём дело, ведь в других местах приложения аналогичный код работает корректно. Не было никаких уведомлений от браузера, просто фокус, а валидацию сделать еще не успел :)