Angular6 AutoFocus using *ngIf

Question

<div class="dropdownContainer" placeholder="test" (click)="ShowDropDown()"  />

<div #tref *ngIf="showDropDown == 1" class="dropdownList" (focusout)="HideDropDown()" style="border:1px solid black;" >this is my test</div>

After clicking the dropDownContainer i would like the dropdownList to appear and have focus put on it.

I Have tried using

  @ViewChild("tref", {read: ElementRef}) tref: ElementRef;

method, but it returns undefined because that element doesnt exist in the DOM until the above div is clicked. How can I autofocus on a dynamic NON INPUT DOM object?

EDIT Updated my code per suggestions, this still will not autofocus on the div.

  @ViewChild("tref") tref: ElementRef;
      ShowDropDown() {
      this.showDropDown = 1;
      this.tref.nativeElement.focus();
      console.log(this.tref);
  }
HideDropDown(){
  console.log('test out')
  this.showDropDown = 0;
}



<input   #tref class="dropdownContainer" placeholder="george" (click)="ShowDropDown()"  />
<div tabindex="-1" (focusout)="HideDropDown()" [hidden]="showDropDown == 0" class="dropdownList"  style="border:1px solid black;" >this is my test</div>

ANSWER TO THE PROBLEM Two fold answer.

1) DIVS cannot have focus unless they have tabindex. Stack answer

2)I need to include setTimeout(() => this.tref.nativeElement.focus(), 1); because an element that is hidden is not automatically ready to receive focus.

3)*ngIf and hidden both worked, once i put in the above fixes

Cleaned up code

import { Component,  ElementRef , ViewChild } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent {

  constructor() {
  }

  showDropDown = 0;



  @ViewChild("tref") tref: ElementRef;
  ShowDropDown() {
this.showDropDown = 1;
setTimeout(() => this.tref.nativeElement.focus(), 1);
  }

HideDropDown(){
  this.showDropDown = 0;
}

test(){ console.log('works');}

}

<div tabindex="-2"    class="dropdownContainer" placeholder="george" (click)="ShowDropDown()"   ></div>
<div tabindex="-1" #tref [hidden]="showDropDown == 0" class="dropdownList"  style="border:1px solid black;" (click)="test()" (focusout)="HideDropDown()">this is my test</div>

There should be a way to make it work with `ngIf`, and without `setTimeout`. — ConnorsFan, Nov 15 '18 at 22:04
@ConnorsFan you are correct hidden is not needed, i will update my post — gh9, Nov 15 '18 at 22:07

ConnorsFan · Accepted Answer · 2018-11-16T01:29:23.213

You can focus the dropdown element as soon as it becomes visible, with the help of ViewChildren and the QueryList.changes event. This technique works no matter how long it takes for the element to appear in the view.

In the template, give a tabindex attribute to the dropdown div:

<div class="dropdownContainer" (click)="showDropDown = true">
  Click here to show the dropdown
</div>

<div #dropDownDiv *ngIf="showDropDown" tabindex="1" class="dropdownList" (focusout)="showDropDown = false">
  This is the dropdown element
</div>

In code, retrieve the dropdown element with ViewChildren, and set the QueryList.changes event handler in ngAfterViewInit. When you are notified that the element has become visible, you can set the focus on it:

showDropDown = false;

@ViewChildren("dropDownDiv") private dropDownDivList: QueryList<ElementRef>;

ngAfterViewInit() {
  this.dropDownDivList.changes.subscribe((list: QueryList<ElementRef>) => {
    if (list.length > 0) {
      list.first.nativeElement.focus();
    }
  });
}

See this stackblitz for a demo.

According to [this answer](https://stackoverflow.com/a/51392628/1009922), you wouldn't have to. I made a [stackblitz](https://stackblitz.com/edit/angular-simple-dropdown-hvvraw) to show that it closes automatically. — ConnorsFan, Nov 16 '18 at 14:45

Uğur Dinç · Answer 2 · 2018-11-15T21:47:01.670

1

Change from *ngIf="showDropDown" to [hidden]="! showDropDown" and you should be able to use @ViewChild inside the component and prevent the "undefiend" issue.

If that still didn't work, you could always pass the element to the component through the click event by changing the click to this (click)="ShowDropDown(tref)". Note that in order for this to work, you'd still need to change *ngIf to [hidden].

edited Nov 15 '18 at 21:47

answered Nov 15 '18 at 21:25

Uğur Dinç

2,415
1
18
25

Thank you for the help, but it still wont autofocus on the div – gh9 Nov 15 '18 at 21:48
@gh9 Check the answers here > https://stackoverflow.com/questions/38307060/how-to-set-focus-on-element-with-binding – Uğur Dinç Nov 15 '18 at 21:51
Thank you very much! that worked I will also update my post with what worked – gh9 Nov 15 '18 at 22:01
Thank you for your help – gh9 Nov 16 '18 at 15:02
No problem. I will leave this answer here for my 10 points :) – Uğur Dinç Nov 16 '18 at 15:12

score 0 · Answer 3 · answered Nov 29 '20 at 09:51

If you use a common container for both elements, and set the focusout on the container, the dropdown will be hidden on any click, including clicks on the dropdown element - without having to manually set the focus. (note we have to set the tabindex on the parent).

<div class="container" (focusout)="showDropDown = false" tabindex="0">
  <div class="dropdownContainer" (click)="showDropDown = true">
    Click here to show the dropdown
  </div>

  <div #dropDownDiv *ngIf="showDropDown" tabindex="1" class="dropdownList" >
    This is the dropdown element
  </div>
</div>

css:

.container:focus {
  outline: none;
}

Angular6 AutoFocus using *ngIf

3 Answers3