I'm trying to implement an on screen phone that takes input from either the keyboard, or from clicking on the numbers on screen.

The input field already works for key down implementations (typing 1 2 3 ....) naturally and where the cursor is (likely from .selectionStart). I'm having an impossible time tracking cursor position when I click on the on screen keyboard. I have tried quite a few different implementations but the current one is:

<input 
  type="text" 
  className="phone-pad-input" 
  id="phone-input"
  onChange={(e) => handleKeypress(e)}
  onFocus={(e) => {e.target.selectionStart = props.cursorPosition}} // coded this last week forget if it even works or does anything
  autoFocus={true} // I want the phone's input focused 100% of the time it's up
  autoComplete="off"
  onBlur={({ target }) => target.focus()}
  value={props.number}>
</input>

My screen key pad is a table where each number is:

<td className="..." onClick={() => handleKeyClicked(#)}></td>

Function for the handleKeyClicked:

const handleKeyClicked = (num: any) => {
  const phoneKeyPad = document.getElementById('phone-input')
  const cursorPosition = (phoneKeyPad as HTMLInputElement).selectionStart 
  console.info("CURSOR POS:", cursorPosition) // this is ALWAYS 0
  // ... logic to put my number in the correct spot with slicing based on cursorPosition
}

Is there any way to grab the .selectionStart from this onclick on the phone pad? If my value is: 1245 and I have my cursor (blinking) between the 2 and 4. I hit the "3" it still says cursor position is 0 and will either append or prepend depending how I coded it. I opened up Google Voice for the sake of testing their phone, and it also appends the numbers (12453) regardless of cursor position.

Thanks for any assistance