IE11 moves cursor to beginning of input text when editing/focus/tab/onblur on the element

Question

I am using input type text box with pre populated values and when I click on the input box the position of the cursor is moving to the start which is not happening in other browsers(only IE11 is the issue present). It's very annoying and spent hours debugging . In fact debugging in IE is very pain.

Please note I do not want to manipulate the DOM and we are not suppose to use Jquery anymore in our application.

I am using react Js as UI framework.

It would be great if someone give some hint on this.

Turmel

Answer 1

You will need:

• A react reference to the input element
• An onFocus event handler on that same input element

Once you've got those two you'd need to set the selection range to the same length of the initial value, like so:

// either
const inputRef = useRef();
// or
const inputRef = React.createRef()

const onFocus = () => {
  inputRef.current.setSelectionRange(value, value);
}

<input ref={inputRef} value={value} onFocus={onFocus}/>

setSelectionRange(startRange, endRange) - Passing to both the same length will push your cursor to the end of the value without anything being selected.

Cornall

@Jereme if you make the startRange length number shorter than the end, does the text get selected? The values passed to setSelectionRange are the lengths of the value. – Cornall

Answer 2

Try to use the value attribute to set the pre-populated values. code like this:

<input type="text" id="txtinput" value="default value" />

The test result as below:

And the IE Browser version as below:

Cabbageworm