Subscribe

Close

Thank you for visiting!

Please consider subscribing to the RSS feed or following me on Twitter.

IE Edge, Angular and Highlighting a Text Field

Recently, I stumbled upon a problem using the Angular Material framework. While using the md-autocomplete component, I wanted to highlight a text field when the user clicked said text field. Easier said than done.

I started writing a directive that highlights a text field when it's focused. Of course I went for the focus event. When the focus event is triggered, it highlights the text field. It worked everywhere. Except in IE Edge.

After some debugging, I simply switched the focus event for the click event, and it started working everywhere.

Here's the directive:

app.directive('autocompleteFocus', function($timeout, $log){
  return{
    link: function(scope, element, attrs){
       $timeout(selectOnFocus, 0);

       function selectOnFocus(){
           element.find("#my-field").bind("click", function () {
               angular.element(this).select();
           });
       }
    }
 }
});

Use it like this:

<md-autocomplete ... autocomplete-focus />

To the top