Святослав

Ты фокусишь форму только в момент клика, и active и focus у тебя потом встаёт на input.
В итоге поэтому и моргает, т.к. у тебя фокус на форму, а не на input.

Переделай иконку с after формы на after инпута.

Попробуй сделать сайт сложнее чем ToDo-List, например, журнал и планировщик финансов.
Где можешь по категориям записывать свои траты, планировать свои расходы на неделю и т.д.
Возьми ReactJs, почитай документацию, посмотри лекции на youtube, и просто уже начни делать!

Функция не привязана ни к какому контексту. Напиши либо стрелочную функцию handleSearch = event => {}
Либо поставь биндинг на функцию: onChane={this.handleSearch.bind(this)}

Сделай:

.submenu {
  max-height: 0;
  overflow: hidden;
  transition: 0.2s (вот это и отвечает за анимацию)
}
.active {
  max-height: 30px;
  transition: 0.2s
}

Проблема этого метода, что надо заранее знать высоту контента внутри.
Иначе если поставить max-height больший чем свой контент, то можно заметить задержки в анимации.
Никаких jq в анимациях не надо использовать.

Скорее всего ты используешь history={hashHistory}
Для того, чтобы урл был без решетки, используй history={browserHistory}