JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://craig.global.ssl.fastly.net/js/mousetrap/mousetrap.min.js?a4098"></script>
<div id="wrapper"></div>

Babel + JSX

class TestComponent extends React.Component {
	handleInputKeyDown(e) {
  	e.stopPropagation();
  	console.log("input key down", e.key);
  }
  
  handleWrapperKeyDown(e) {
    e.stopPropagation();
  	console.log("wrapper key down", e.key);
  }
  
  componentDidMount() {
	  console.log("Binding keys with Mousetrap", this.wrapper, this.mousetrapInput);
  	Mousetrap(this.wrapper).bind('esc', this.handleWrapperKeyDown, 'keydown');
  	Mousetrap(this.mousetrapInput).bind('esc', this.handleInputKeyDown, 'keydown');
  }
  
  componentWillUnmount() {
    console.log("Unbinding esc from this.wrapper", this.wrapper, this.mousetrapInput);
  	Mousetrap(this.wrapper).unbind('esc');
  	Mousetrap(this.mousetrapInput).unbind('esc');
  }
  
	render() {
  	return (
      <div ref={(elem) => this.wrapper = elem}>
        Press "esc" in each of these text fields and monitor the console.<br />
        The input that uses React's onKeyDown does not seem to capture the input. (instead it is captured by the wrapper.)<br />
        Mousetrap: <input ref={(elem) => this.mousetrapInput = elem} />
        <br />
        React: <input onKeyDown={this.handleInputKeyDown} />
      </div>
    )
  }
}

React.render(<TestComponent />, document.getElementById("wrapper"));