Autofocus only works once

When the Input is clicked, autofocus works only on the first instance - therefore the 'list-formatter' (autocompleListFormatter) is initiated only once.


Is there a simple solution to make 'autofocus' focus more than one time?


<form [formGroup]="myForm" class="">
  <div class="form-style">


export class DropdownComponent implements OnInit, AgEditorComponent {
  @Input() name: String;

  public dropdownData = ColumnData[0].cellEditorParams.values;
  public myForm: FormGroup;
  public selected;
  value: any;
  oldValue: any;
  params: any;
  public container;
  constructor(private builder: FormBuilder, private _sanitizer: DomSanitizer) {}

// ****DROPDOWN****** //
  autocompleListFormatter = (data: any) => {
    let html = `<span>${}</span>`;
    return this._sanitizer.bypassSecurityTrustHtml(html);

  refresh(params: ICellEditorParams) {
    return true;

  getValue(): any {
    if (this.value === '') {
      this.value = this.oldValue;
    return this.value;

  agInit(params: ICellEditorParams) {
    this.value = params.value;
    this.oldValue = this.value;
    this.value = '';
    return this.value;

  ngOnInit() {
    this.myForm ={
      costCenter: ''


Update: I have read that it is useful to implement an auto-focus directive. I have added the directive to my code but cannot get it to function correctly

Score: 12
Tags: angular, typescript
Views: 890
Date posted: 9/18/2019

How to set autofocus in angular or angular 2 not angularjs

I see many posts in how to set autofocus on an input filed in angularjs by creating a directive or HTML autofocus, Is there a quick and easy way to set focus in angular (angular 2, angular 4 etc)

Score: 9
Tags: angular, angular4
Views: 25246
Date posted: 3/17/2017

How to set autofocus on a matInput element on click event in Angular 6?

Similar to Google Login page, I want to have autofocus on input element after on click event. I have tried @ViewChild('id') and document.getElementId('id'). Both of it doesn't work. It's always null or undefined. How can I achieve this?

       <mat-form-field class="example-full-width col-sm-4">
        <input autofocus id="login-username" matInput 
       formControlName="userName" minlength="5" maxlength="20" 
       name="userName" placeholder="Username" required #input> 

        <div class="col-sm-12">
           <button (click)="changeView()" type="button" mat-raised-
             button color="primary">Next</button>

         <mat-form-field class="example-full-width col-sm-4" 
        <input autofocus type="password" matInput 
       placeholder="Password" minlength="5" maxlength="20" 
       formControlName="userPassword" #passwordInput>  
Score: 9
Tags: angular, html, angular-material
Views: 12326
Date posted: 7/25/2018

HTML5 auto focus not working in firefox

I am working with and angular JS and HTML5 application. I have a login form with username and password field. when the login page loads i want the focus to be on the username by default.i have used HTML5 autofocus="autofocus" to implement this without writing any script.

 <input name="USER" id="USER" type="email" class="input-control" data-ng-model="login.userName" required autofocus="autofocus">

This works fine in Google Chrome, Internet Explorer and Safari. however the autofocus is not working in Mozilla Firefox.i have red about some issues with autofocus in firefox for old versions. i am using version 48.0

Any solutions? Thanks in advance

Score: 6
Tags: javascript, angularjs, html, firefox, autofocus
Views: 8412
Date posted: 11/29/2016

Angular6 AutoFocus using *ngIf
<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;
  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';

  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);

  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>
Score: 5
Tags: angular
Views: 2542
Date posted: 11/15/2018


© 2021 Search Overflow
Contributions licensed under cc by-sa