Selecting all content of text input on focus doesn't work in Microsoft Edge

Question

I seem to have run into an Edge-specific problem with selecting all of the text in an input field. I am using angular's ng-focus to call a function in the controller to select all the text in the field.

function selectAllTextOnFocus($event) {
    $event.target.select();
}

This works fine in all browsers except Microsoft Edge, which will not select the text in the input field.

I have also tried another jQuery solution that works except for the first selection of the input field. After that it works as intended and selects all of the text.

$('input').on('focus', function (e) {
    $(this).one('mouseup', function () {
        $(this).select();
        return false;
    }).select();
});

Is this just a known issue with Microsoft Edge, or am I missing something?

Answer 1

I'm an engineer on the Microsoft Edge team, and see the issue to which you're referring. For the time being, you could call the select method after a brief delay:

function selectAllTextOnFocus($event) {
    // See https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8229660/
    if ( navigator.userAgent.match(/Edge\/(13|14|15|16|17)/) ) {
        return setTimeout( $event.target.select.bind( $event.target ), 10)
    }
    $event.target.select();
}

Test both approaches here: https://jsfiddle.net/jonathansampson/xe9x9s7b/

I've taken the liberty to file a public bug on http://bugs.microsoftedge.com for tracking.