why is mouseup event not firing when releasing outside div in this react code (using window.addEventListener)

Question

Anyone able to highlight why the mouseup event is not firing when I click on the inside div, drag cursor (with mouse button still down) to outside the div's, then release the button? Failure also seems somewhat intermittent.

This is a react web app.

import * as React from 'react'
import './App.css'

class App extends React.Component {

  public handleMouseDown = (e:any) => {
    // tslint:disable-next-line:no-console
    console.log('handleMouseDown - add Listeners')      
    window.addEventListener('mouseup', this.handleMouseUp, true)
  }

  public handleMouseUp = (e:MouseEvent) => {
    // tslint:disable-next-line:no-console
    console.log('handleMouseUp - remove Listeners')      
    window.removeEventListener('mouseup', this.handleMouseUp, true);
  };  

  public render() {
    return (
      <div className="App" style={{ border: '1px solid blue', height:300, padding:50 }} >
        Main Div - Top
        <div 
          style={{ border: '1px solid black', height:100 }}
          onMouseDown={this.handleMouseDown}
        >
          Inside Div
        </div>        
        Main Div - Bottom
      </div>
    );
  }
}

export default App;

App.css

.App {
  text-align: center;
}

Debug output:

handleMouseDown - add Listeners
handleMouseUp - remove Listeners
handleMouseDown - add Listeners
handleMouseUp - remove Listeners
handleMouseDown - add Listeners
handleMouseDown - add Listeners
handleMouseDown - add Listeners
handleMouseDown - add Listeners

Answer 1

I figured out when dragging mouse from Inside Div to Outside, text was selected and moved together. This changed behaviour of mouse event. I tried putting user-select: none; to .app's css and it works properly. Take a look at my code:

class App extends React.Component {
	constructor() {
    super();
  	this.handleMouseUp = this.handleMouseUp.bind(this);
    this.handleMouseDown = this.handleMouseDown.bind(this);
  }
  handleMouseDown(e){
    console.log('handleMouseDown - add Listeners')      
    window.addEventListener('mouseup', this.handleMouseUp, true)
  }

  handleMouseUp(e) {
    console.log('handleMouseUp - remove Listeners')      
    window.removeEventListener('mouseup', this.handleMouseUp, true);
  } 
  
  render() {
    return (
      <div className="App" style={{ border: '1px solid blue', height:300, padding:50 }} >
        Main Div - Top
        <div style={{ border: '1px solid black', height:100 }} onMouseDown={this.handleMouseDown}>  Inside Divn </div>
        Main Div - Bottom
      </div>
    )
  }
}

ReactDOM.render(
  <App  />,
  document.getElementById('container')
);

.App {
  text-align: center;
  user-select: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Hope this will help.

Answer 2

Why don't you attach the event separately:

onMouseDown={this.handleMouseDown}
onMouseUp={this.handleMouseUp}