Two EventListener (click and select) log input fields properties selectionStart and selectionEnd.
Select a range (with double click or mouse selection) inside the input field, the EventListener for select gets fired, selectionStart and selectionEnd are logged as expected (selectionStart < selectionEnd).
Then click inside the input field to clear the selection and show the caret. The EventListener for click gets fired, selectionStart and selectionEnd are logged with the same values again (selectionStart < selectionEnd).
Then click inside the input field again. The EventListener for click gets fired again, selectionStart and selectionEnd are logged with the correct values (selectionStart === selectionEnd).
document.querySelectorAll('input').forEach(el => {
el.addEventListener('click', (e) => {
const selectionStart = e.target.selectionStart;
const selectionEnd = e.target.selectionEnd;
console.log(selectionStart, selectionEnd);
})
})
document.querySelectorAll('input').forEach(el => {
el.addEventListener('select', (e) => {
const selectionStart = e.target.selectionStart;
const selectionEnd = e.target.selectionEnd;
console.log(selectionStart, selectionEnd);
})
})<input value="foobar">(or on jsfiddle: https://jsfiddle.net/x912yfpt/1/)
My guess is, that it takes time to update the node, so that the first click reads the old values. This is confirmed by a test function that reads the selection in a short interval. This reads the correct values after the first and before the second click.