Autofocus on a custom element in angular 2

Question

I have an html page with html elements and my own custom component(which is a dropdown) created in angular 2. as:

<div>
<input type="text" name="fname"><br>
<myDropdownComp autofocus> </myDropdownComp>
</div>

On pageload, focus should be on my custom dropdown component. How can I do that? I tried giving 'autofocus' which is not working. Please help. Thanks in advance.

Inside your myDropdownComp you will need to write the custom logic in ngOnInit for element focus. — Arpit Kumar
– Arpit Kumar, Commented Sep 21, 2018 at 5:47
in this case autofocus only works when page is loaded. When we press the button next time, browser does not respect autofocus value as page is already solution. — T. Shashwat
– T. Shashwat, Commented Sep 21, 2018 at 5:57

Patryk Brejdak · Accepted Answer · 2018-09-21 05:59:33Z

1

Firstly, element is need to be focusable, to achieve this you have to set tabIndex attribute to element.

<myDropdownComp tabIndex="-1"></myDropDownComp> // now component is focusable

Now you can try with autofocus attribute, but it would be preferred to do this in ngAfterViewInit, to check if there is already focused element, if there is one, blur it, and focus this element.

export class MyDropdownComponent implements AfterViewInit {
   constructor(element: ElementRef) { }

   ngAfterViewInit() {
      if (document.activeElement) {
         document.activeElement.blur();
      }
      this.element.nativeElement.focus();
   }
}

answered Sep 21, 2018 at 5:59

Patryk Brejdak

1,60115 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

T. Shashwat · Accepted Answer · 2018-09-21 06:11:37Z

0

run npm install angular-autofocus-fix --save in cli

import import { AutofocusModule } from 'angular-autofocus-fix'; in your module and AutofocusModule in import section.

then you can freely use autofocus as an attribute in any tag.

or

use autofocus="true" in input tag, see updated snippet

<div>
<input autofocus="true" type="text" name="fname"><br>
<myDropdownComp > </myDropdownComp>
</div>

answered Sep 21, 2018 at 6:11

T. Shashwat

1,16510 silver badges23 bronze badges

Collectives™ on Stack Overflow

Autofocus on a custom element in angular 2

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related