React: Bug when moving a pressed mouse above a 2D grid

Question

I am working on a react project, where I will need a grid. I have created it with arrays. A row consists of 10 cells, a grid consists of 10 rows. I need to handle 3 mouse events on the cells because I will need to colour them later. MouseUp, MouseEnter and MouseDown. The mouse enters functions should be handled only if the mouseDown happened (Moving the pressed mouse on the grid - to colour several cells with 1 motion) After implementing them, I have realized there is a bug, which occurs when the mouse is pressed, then pulled from 1 row to the other.

For simplifying and producing the problem, having 2 rows only is enough (no event handling needed, just a width an height is specified for the cells to form a grid). If I make a vertical movement (anywhere in the 2 rows), the following vertical movement will throw a blocked cursor issue. I have looked over several easy react games on the internet, they all produce the same issue. With an empty grid, without any mouse event installed.

I guess the problem is the way how the rows refresh. Is there any solution to get rid of this annoying cursor error/row refreshing issue or does it have something to do with react states?

Answer 1

The solution is add preventDefault handling to the mouseDown event, on the cell.

return (
    <div
      className="cell"
      onMouseDown={(e) => {
        e.preventDefault();
      }}       
    >
      {" "}
    </div>
  );