I have two React ponents. One has a window.onkeyup listener and when for instance space is pressed it performs an action. The other has input elements to edit text attributes. However, when the text is edited in the second ponent the keyevent is also fired in the first ponent. I have tried adding:

event.stopPropagation()
event.preventDefault()
event.nativeEvent.stopImmediatePropagation()

In the event handler but none of these seems to stop the event.

I made a code example, in which case I don't want the window.onkeyup event to fire when typing in the input. Is there any way to solve this?

class Hello extends React.Component {   
  ponentDidMount() {
    window.onkeyup = () => console.log("hello")
  }
  
  handleChange(event) {
    event.preventDefault()
        event.nativeEvent.stopImmediatePropagation()
  }
    
  render() {
    return <div onChange={this.handleChange}><input ></input></div>
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

<script src=".1.0/react.min.js"></script>
<script src=".1.0/react-dom.min.js"></script>

<div id="container"></div>

I have two React ponents. One has a window.onkeyup listener and when for instance space is pressed it performs an action. The other has input elements to edit text attributes. However, when the text is edited in the second ponent the keyevent is also fired in the first ponent. I have tried adding:

event.stopPropagation()
event.preventDefault()
event.nativeEvent.stopImmediatePropagation()

In the event handler but none of these seems to stop the event.

I made a code example, in which case I don't want the window.onkeyup event to fire when typing in the input. Is there any way to solve this?

class Hello extends React.Component {   
  ponentDidMount() {
    window.onkeyup = () => console.log("hello")
  }
  
  handleChange(event) {
    event.preventDefault()
        event.nativeEvent.stopImmediatePropagation()
  }
    
  render() {
    return <div onChange={this.handleChange}><input ></input></div>
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="container"></div>

• javascript
• reactjs
• dom-events

2 Answers 2

You want to use the onKeyUp event instead, and use event.stopPropagation.

class Hello extends React.Component {
  ponentDidMount() {
    window.onkeyup = () => console.log("hello");
  }

  handleKeyUp(event) {
    event.stopPropagation();
  }

  render() {
    return <div onKeyUp={this.handleKeyUp}><input /></div>;
  }
}

ReactDOM.render(<Hello name="World" />, document.getElementById("container"));

<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="container"></div>

The solution for a similar case where I had an event listener attached to the space button, with input elements on the same page:

In the event listener, if focus is on an input element, return:

const listener = (e) => {
  if (e.target.tagName === "INPUT" || e.target.tagName === "BUTTON"){
    return
  } else {
    if(e.key === " "){
      console.log("Do something");
    }
  }
}