React-Events: onMouseUp not firing after onMouseEnter event

Question

In my react application, I have a grid made up of nodes, each of which has an onMouseUp, onMouseDown, and onMouseEnter listener. I find that after I drag my mouse and move it around the grid, it does not trigger onMouseUp even after I let go of my mouse. My code can be seen below:

         // inside my render function
         {this.state.grid.map((row, rowIdx) => {
              return (
                <div key={rowIdx}>
                  {row.map((node, nodeIdx) => {
                    const {
                      row, 
                      col
                    } = node;
                    return (
                      <Node
                        key={nodeIdx}
                        col={col}
                        onMouseDown={(row,col) => {this.handleMouseDown(row,col)}}
                        onMouseEnter={(row, col) =>this.handleMouseEnter(row, col)}
                        onMouseUp={(row, col) =>this.handleMouseUp(row, col)}
                        row={row}></Node>
                    );
                  })}

My handleMouseUp function is:

handleMouseUp = (row,col) => {
   ...
}

In each node, I am referencing these callbacks by:

           return (
            <div
                onMouseDown={() => onMouseDown(row, col)}
                onMouseEnter={() => onMouseEnter(row, col)}
                onMouseUp={() => onMouseUp(row,col)}>
            </div>
          );

The CSS properties for each node include (not sure if this has anything to do with it):

    user-drag: none; 
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -moz-user-select: none;

Does anyone know how to fix this issue? Thanks!!

Answer 1

It seems that onMouseUp only fires if you unclick while the cursor is still in the <div/> .
Try using onDragEnd and set draggable='true' in the <div/> and see if it works.

Edit: I would suggest moving the logic to the parent container for simplicity. You can refer to this demo: https://stackblitz.com/edit/grid-painter . Some values are hard-coded but the main concept is there.