OnSubmit не работает в раскрывающемся меню response-bootstrap nav

Я пытался исправить это, но у меня закончились идеи. Это мой первый реактивный проект. Я пытаюсь добавить поисковый запрос в раскрывающийся список навигации. Я использую реакцию-бутстрап. Я знаю, что я близок к тому, чтобы он заработал, потому что, если я удалю форму и помещу ее за пределы раскрывающегося списка, например, поместив ее в заголовок, она будет работать нормально. Итак, что-то внутри раскрывающегося списка вызывает ошибку. Я сузил круг вопросов до отказа.

    <Navbar inverse collapseOnSelect>
    <Navbar.Header> ...

    </Navbar.Header>

    <Navbar.Collapse>

      <Nav pullRight>
        <NavItem eventKey = {1} href = "#" className = "nav-item">
          Home
        </NavItem>
        <NavDropdown eventKey = {3} title = "Watches" id = "basic-nav-dropdown">
          <MenuItem eventKey = {3.3} className = "nav-item">
            <form onSubmit = {this.onFormSubmit}>
              <input
                type = "text"
                value = {this.state.term}
                onChange = {this.onInputChange}
                onClick = {this.onClickStopDismiss}
              />
              <input type = "submit" value = "Submit" />
            </form>
          </MenuItem>
        </NavDropdown>
      </Nav>
    </Navbar.Collapse>
  </Navbar>

Обработчики, написанные внутри одного и того же со вкусом оформленного компонента, приведены ниже. Причина добавления onClickStopDismiss к вводу заключается в том, что, когда я выбираю панель поиска внутри раскрывающегося списка, она закрывает ее, прежде чем я смогу ввести. Добавив этот onClick к поисковому вводу, он остановил закрытие раскрывающегося списка.

Состояние передается родительскому компоненту, но здесь это не актуально, потому что внутри console.info ничего не появляется до того, как он будет передан родительскому компоненту. Итак, что-то мешает кнопке отправки.

class NavMain extends Component {
  state = {
    term: ""
  };

  onInputChange = e => {
    this.setState({ term: e.target.value });
  };

  onFormSubmit = e => {
    console.info(this.state.term);
    e.preventDefault();

    // call back function that will run when called from parent component
    this.props.onTermSubmit(this.state.term);
    this.setState({ term: "" });
  };

  onClickStopDismiss = e => {
    // e.preventDefault();
    e.stopPropagation();
  };

Любые идеи приветствуются, пожалуйста. Обновлено: в консоли нет ошибок.

ссылка здесь на скриншот изображения