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

Share Improve this question Follow edited Jan 8, 2021 at 8:57 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Aug 10, 2018 at 22:09 AlexVestinAlexVestin 2,58622 gold badges1818 silver badges2020 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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");
    }
  }
}