JSFiddle - React, Tailwind, and code Playground

HTML

<div>
D = keyDown, I = Input, C = position after Change, FT = Format Textbox, U = keyUp
</div>
<label>Type<br />
    <input type="text" name="textBox" id="textBox" />
</label>
<div id="output"></div>

CSS

label, input{
  font-size:24px;
}
div{
  font-size:12px;
}

JavaScript

var outelm = document.getElementById("output");
var textBox = document.getElementById("textBox");
var caret = 0;
var didKeyDown = false;
var didInput = false;

textBox.addEventListener("keydown", function() {
	outelm.innerHTML = outelm.innerHTML + "<br />D: " + this.selectionStart;
	caret = this.selectionStart;
  didKeyDown = true;
});

textBox.addEventListener("click", function() {
	caret = this.selectionStart;
});

textBox.addEventListener("focus", function() {
	caret = this.selectionStart;
});

textBox.addEventListener("input", function() {
	outelm.innerHTML = outelm.innerHTML + " | I: " + this.selectionStart;
  if(!didKeyDown) {
    formatTextbox(this);
  } else {
  	didInput = true; //this is to allow for left/right arrow keys to work
  }
});

textBox.addEventListener("keyup", function() {
	outelm.innerHTML = outelm.innerHTML + " | U: " + this.selectionStart;
  if(didKeyDown && didInput) {
    formatTextbox(this);
  }
	didKeyDown = false;
  didInput = false;
});

function formatTextbox(element) {
	outelm.innerHTML = outelm.innerHTML + " | FT: " + element.selectionStart;
  caret ++;
  if (element.value.length === 4){
      element.value = element.value.substring(0, 3) + "-" + element.value.substring(3);
  	  caret ++;
  }
  element.setSelectionRange(caret, caret);
	outelm.innerHTML = outelm.innerHTML + " | C: " + element.selectionStart;
}