Angular Routes / input autofocus

I'm using angular route. Each page(route) has an input field. I have successfully used the attribute autofocus on the first page. When I navigate to the other pages, the input does not autofocus. Returning to the first page does not autofocus the input again. I understand now why it doesn't work but would like to know if there is a way to accomplish this.

I'm new to Angular and I'm not sure I understand what I read about ngFocus:

https://docs.angularjs.org/api/ng/directive/ngFocus

Score: 11
Tags: javascript, angularjs, input, routes, autofocus
Views: 2334
Date posted: 4/29/2015

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> 
      </mat-form-field>

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

         <mat-form-field class="example-full-width col-sm-4" 
          #passwordInput>
        <input autofocus type="password" matInput 
       placeholder="Password" minlength="5" maxlength="20" 
       formControlName="userPassword" #passwordInput>  
      </mat-form-field>
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;
      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>
Score: 5
Tags: angular
Views: 2542
Date posted: 11/15/2018


1


© 2021 Search Overflow
Contributions licensed under cc by-sa