JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test1" style="background:blue;width:200px;height:200px;color:white">Case #1 - cursor not changing for mousedown before moving it (Press mouse - nothing happens. Then hold mouse and move)</div>

<div id="test2" style="background:red;width:200px;height:200px;color:white">Case #2 - cursor not changing for mousedown before moving it when pressing a key (Press mouse, then click any key - Nothing happens. Then hold mouse and move)</div>

CSS

body, html {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

JavaScript

var el1 = document.getElementById("test1");
var el2 = document.getElementById("test2");

el1.addEventListener("mousedown", function() {
    el1.style.cursor = "move";
});

document.addEventListener("keydown", function() {
    el2.style.cursor = "move";
});