Angular2+ autofocus input element

How can I autofocus input element? Similar to this question, but not with AngularDart. Something like this:

<input type="text" [(ngModel)]="title" [focus] />
//or 
<input type="text" [(ngModel)]="title" autofocus />

Does Angular2 has any build in support for this feature?

Best close question is this one, but is there any shorter/easier solution, since I do not have "list of input boxes". In provided link *ngFor="#input of inputs" is used, but I only have 1 input in control template.

Score: 63
Tags: angular, typescript
Views: 74846
Date posted: 1/26/2017

Angular Material button remove autofocus

I have the following button

<td mat-cell *matCellDef="let element">
  <button mat-icon-button type="button" (click)="downloadStuff(element)">
    <mat-icon mat-icon matTooltip="{{element.someId}}">picture_as_pdf</mat-icon>
  </button>
</td>

All good but I noticed the little bugger gets outlined by default:

enter image description here

Ok.... CSS lets me remove the annoying outline withe the following:

button:focus {
    outline: none;
}

But then.. I still get this annoying default background focus:

enter image description here

I've tried a few overlay and background-related things in CSS and none of these seemed to address the issue. How do I remove this default background? And why does it behave like this by deafault???

See the selected item in dev tools. enter image description here

Score: 15
Tags: css, button, angular-material, default
Views: 21389
Date posted: 12/12/2018

Angular2: Autofocus does not work on view 'refresh' (angular)

I'm building a QuizTool/LMS similar in nature to Duolingo (SPA-ish).

tldr: Hit the plnkr, 'Check Answers', 'Do Another', and notice the first input element no longer has the input focus -- even tho the 'autofocus' property seems to be set correctly. Can I fix this?

https://embed.plnkr.co/DU8opUuquP5MXlcfdHIe/

long version: When I first render a quiz, I am able to set the input focus (using a bound autofocus property) into the first input area on the screen (a TEXTAREA where the user will answer the first question) -- so the user can just start typing away. Excellent.

However, once the user has submitted that first set of questions (the first quiz), the user can choose to 'Do Another' quiz -- I/Angular am able to redraw a new quiz/UI (with, for now, what happen to be the same exact questions), only the 'autofocus' attribute does not seem to work -- i.e. the first input/textarea does not get the focus.

It does appear that the bound autofocus attribute is set, however.

Which means either: 1) i'm reading the attribute incorrectly somehow 2) it's a bug in Chrome (Version 56.0.2924.87 (64-bit) on Mac OSX) 3) something is getting/stealing the focus after this field's autofocus is correctly set 4) etc.

I've set up 'firstQuestion' and 'lastQuestion' local vars in the ngFor loop to help prove that the autofocus property is being set deterministically (just change the [autofocus]="firstQuestion" to [autofocus]="lastQuestion").

I'm open to fixing this however I need to. The whole 'no controller' thing is pretty new to me, so it's very possible I'm doing something stupid with this entire setup.

I have tried using Angular forms/ngForm but it doesn't seem to make a difference.

I'd also be curious to know where I could find a basic tutorial on Angular2 transitions/'controller' stuff -- i.e. how do I redraw a screen, or switch to a new view, etc. -- without what might be considered a 'traditional' controller. I think with VB you said something like:

oldForm.hide(); newForm.show();

If none of this works, I want to set the focus manually/jqLite/pre-HTML5/whatever -- haven't had much success there yet either -- thus this question.

Thank you.


Not sure how useful this is, but it seems my app -- which was set up with the ng cli tool -- is different significantly than what plunkr is producing.

i was able to discover that:

  1. even if the 'document.activeElement' was set to the correct textarea (according to querying the DOM), it might still not be activate for the user to start inputting text (I set a red bg to make it very visual), and
  2. the outer/hosting index.html page, shown below, was getting the focus after my component finished loading. i added a hack javascript function to manually push the focus back to my desired element, but it was really just for testing.

    <script>
         setInterval(function(){ 
            if(document.activeElement!=null){
                if(document.activeElement.id!='textarea-0'){ // find first input element on the page
                    document.getElementById('textarea-0').focus(); // set the focus
                }
            } 
        },
        5000);                
    </script>
    

Update:

Fixed. Thanks again to @mickdev.

This is a small twist on the first solution. I'd describe it as "using a template reference variable with the ngAfterViewChecked() lifecycle method on the component you are rendering".


Add this stuff to the component you are rendering:

import { ViewChild } from '@angular/core';

@ViewChild('focusThis') focusThis;

// to keep track of which element in our loop we are in
id:number=0 

//wait for viewchild to update then focus
ngAfterViewChecked(){
    // only focus the 0th (i.e. first) element of our loop
    if(this.id == 0){
        this.focusThis.nativeElement.focus();
        this.id++
    }
}

Then add the template reference variable, '#focusThis':

<textarea   #focusThis
            [(ngModel)]="question.useranswer" 
            [disabled]="quiz.wasEvaluated"...
Score: 7
Tags: angular
Views: 5959
Date posted: 3/9/2017

How to run Jquery after DOM is loaded in Angular Js

I have created a single page application (multiple) views using angular that loads different page content. I would like apply initial focus for the first input element for all the screens throughout using angular script rather than using autofocus attribute in each and every page form element.

Is there any way to do this?

and

How do we know whether Angular view (DOM) is completely loaded or not?

Score: 6
Tags: jquery, angularjs
Views: 2520
Date posted: 11/18/2016

PrimeNG Multiselect autofocus


Using PrimgNG v7.1.3 in Angular v7 project.

Implemented Multiselect (https://www.primefaces.org/primeng-7.1.3/#/multiselect), in a simple component.
Need to set focus on it when the page loads.

Below solution works for Dropdown but not for Multiselect:

In HTML: <p-dropdown #someDropdown></p-dropdown>

In Component:

import { Dropdown } from 'primeng/dropdown';
@ViewChild('someDropdown') someDropdown: Dropdown;

this.someDropdown.applyFocus();

But for Multiselect, it throws error that such method is not valid.

Tried the first answer in this SO link mentioned for "control within ngIf", still no luck: primeng: Setting focus on control
Checked the PrimeNG documentation and User Guide too but no mention of focusing feature.

Later also tried below. None of it worked.

this.someMultiSelect.focus();
this.someMultiSelect.applyFocus();

this.someMultiSelect.el.focus();
this.someMultiSelect.el.applyFocus();

this.someMultiSelect.el.nativeElement.focus();
this.someMultiSelect.el.nativeElement.applyFocus();

this.someMultiSelect.containerViewChild.focus();
this.someMultiSelect.containerViewChild.applyFocus();

this.someMultiSelect.containerViewChild.nativeElement.focus();
this.someMultiSelect.containerViewChild.nativeElement.applyFocus();

Stackblitz: https://stackblitz.com/edit/primeng-multiselect-autofocus

Please suggest.

Any help is appreciated.

Score: 5
Tags: angular, primeng, autofocus, primeng-dropdowns
Views: 291
Date posted: 7/17/2020


2


© 2021 Search Overflow
Contributions licensed under cc by-sa