md-autofocus: no longer works on page load

[BobDankert]

Actual Behavior:

• What is the issue? * Adding md-autofocus to an autocomplete does not set focus on the element
• What is the expected behavior? It is expected it would set focus on the element

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: https://codepen.io/anon/pen/mqyjjz
• Details: I added md-autofocus to the md-autocomplete element from the demo on the angular material website under md-autocomplete. The item does not get focused.

AngularJS Versions: *

• AngularJS Version: 1.6.6
• AngularJS Material Version: 1.1.5

Additional Information:

• Browser Type: * Chrome
• Browser Version: * 61.0.3163.100 (Official Build) (64-bit)
• OS: * Windows 10
• Stack Traces:

---

Shortcut to create a new CodePen Demo. Note: * indicates required information. Without this information, your issue may be auto-closed.

Do not modify the titles or questions. Simply add your responses to the ends of the questions. Add more lines if needed.

[BobDankert]

If anyone has any ideas on how to make this work, that would be appreciated. Right now, I am doing a giant hack:

$timeout(function () {
          angular.element(document.getElementById('autocomplete-element-id')).find('input').focus();
        }, 1500);

This delay is horrible and causes weird behavior on the page, but it's the best I was able to come up with after trying a number of different approaches.

[vishnu-vv]

I'm also having this issue, not yet fixed 👎

[Splaktar]

I can't seem to get md-autofocus to work for inputs or autocompletes on CodePen during page load.

[Splaktar]

I can confirm that md-autofocus is working with Dialogs and SideNavs (used in the demos) but I can't find a case anywhere that shows it working on page load atm. The docs do state "or upon page load for input-like elements". I've tested with both autocomplete and inputs. Neither gets focus on page load. I tested with CodePen in Debug View and using the docs site running locally.

Testing with Chrome 63 on macOS.

[andradefil]

Any update on this?

[Splaktar]

@killboard nope. PRs are welcome.

[Splaktar]

@marosoft do you have any interest in looking into this one?

[marosoft]

@Splaktar is there any working CodePen I can play with? I can adjust the original one as it is missing all the links to the scripts and css. The one you posted in 2017 expired.

[Splaktar]

@marosoft this is the editor to the debug view of the CodePen that I posted.

[Splaktar]

I'm starting to think that this never worked. I tested with 1.0.0, 1.1.0, 1.1.4, 1.1.5, and 1.1.24 but did not see this work on page load w/o a dialog or sidenav in any case.

This CodePen demonstrates the use of autofocus on an <input>. The behavior is defined by the browser.

Note that there are a number of caveats with using autofocus, especially around a11y.

Let's remove "or upon page load for input-like elements" from https://material.angularjs.org/latest/api/directive/mdAutofocus.

[Splaktar]

We may also want to mention the autofocus attribute and link to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautofocus from our docs.

[marosoft]

@Splaktar you are right about it. It never worked that way. The only thing it does is to make sure that the input field is going to get the focus. This is useful for the scenarios where you want to get the focus like in the dialog.

I created my version of a Codepen based on yours. I moved the md-autofocus to the md-autocomplete. The way I made it to work was to find the focus target in $document. Part of the code reused from the dialog component from here.

    $timeout(function () {
      var target = $mdUtil.findFocusTarget($document);
      target.focus();
    }, 1500);

A non-related thing is that there was a bug in createFilterFor and the items were not being displayed.

I tried to use autofocus attribute in the Codepen but it never worked for me. Even in a demo view.