onClick doesn't fire at all times

Question

I started playing with some React/Redux + t7 (in order to avoid any sort of transpiling), for the sake of learning.

When it all started making some sense to me, I encountered this voodooish issue, where the bounded onClick function sometimes fires and sometimes doesn't (?!) As you can see, clicking the plus button doesn't always invoke the bounded function to onClick.

I'm using the latest version of Google Chrome (v53).

What the hell?

JS

'use strict';

const store = Redux.createStore(Redux.combineReducers({
  todos: (state = [], action) => {
    switch(action.type) {
      case 'ADD_TODO':
        return state.concat([action.payload]);
      default:
        return [];
    }
  }
}));

t7.module((t7) => {
  t7.assign("AddTodo", React.createClass({
    addTodo() {
      console.log('clicked');
      return store.dispatch({
        type: 'ADD_TODO',
        payload: {
          text: this.refs.todoText.value,
        }
      })
    },
    render() {
      return t7`
        <div className="row">
          <div className="col-xs-4 form-group-lg">
            <input className="form-control" ref="todoText"/>
          </div>
          <div className="col-xs-2">
            <button className="btn btn-lg btn-info">
              <span className="glyphicon glyphicon-plus"
                    onClick="${this.addTodo}"
                    style=${{fontSize: 'large'}}>
              </span>
            </button>
          </div>
        </div>
      `;
    }
  }));

  t7.assign("TodoList", React.createClass({
    render() {
      return t7`
        <div className="row">
          <div className="col-xs-12">
            <ul>
              ${store.getState().todos.map((todo, i) => t7`
                <li key=${i}>${todo.text}</li>
              `)}
            </ul>
          </div>
        <div>
      `;
    }
  }));

  const render = () => ReactDOM.render(
    t7`
      <div className="container">
        <div className="jumbotron">
          <h1>Todos</h1>
        </div>
        <AddTodo />
        <TodoList />
      </div>
    `, document.getElementById('root')
  );

  store.subscribe(render);
  render();
});

Answer 1

Your Click event works whenver your click on the glyphicon plus and not outside it. The issue is that you have placed the onClick event at the wrong place add it to the button rather than the span and it will work

render() {
      return t7`
        <div className="row">
          <div className="col-xs-4 form-group-lg">
            <input className="form-control" ref="todoText"/>
          </div>
          <div className="col-xs-2">
            <button className="btn btn-lg btn-info" onClick="${this.addTodo}">
              <span className="glyphicon glyphicon-plus"

                    style=${{fontSize: 'large'}}>
              </span>
            </button>
          </div>
        </div>
      `;
    }