PrimeNG Multiselect autofocus

Question

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.

Ashot Aleqsanyan · Accepted Answer · 2020-07-22T09:56:30.127

3

you can get element by ViewChild and do this trick to make it highlighted.

something like this:

Component

import { MultiSelect } from 'primeng/multiselect';

export class AppComponent implements AfterViewInit {
  name = 'Angular';

  @ViewChild('someDropdown') someDropdown: MultiSelect; // <--- you need to import this from PrimeNG Library

 ngAfterViewInit() {
   setTimeout(() => {
     this.someDropdown.containerViewChild.nativeElement.click();  
     this.someDropdown.hide();
   }, 300);

  }

Here is the Stackblitz example:

https://stackblitz.com/edit/ngprime-multiselect-efpy6z?embed=1&file=src/app/app.component.ts

edited Jul 22 '20 at 09:56

answered Jul 21 '20 at 08:08

Ashot Aleqsanyan

4,252
1
15
27

I need to set focus and not open the multi-select. User may or may not want to open the multiselect but the focus should be set on page load itself. – Kunal Dethe Jul 21 '20 at 08:32
@KunalDethe can you check the example one more time? Is this what you want? – Ashot Aleqsanyan Jul 21 '20 at 08:37
I have added the Stackblitz link in the description. – Kunal Dethe Jul 21 '20 at 08:51
To ease the testing part, added a button and on click of it should set focus on the element. – Kunal Dethe Jul 21 '20 at 09:15
@KunalDethe yes, I saw your created example, but please can you clarify, what do you mean by saying, set focus on the element? Did you mean you want to somehow highlight the multiselect field? – Ashot Aleqsanyan Jul 21 '20 at 10:05
Yes, it should be highlighted when User presses the keyboard "Tab" key to traverse in a form. In a HTML form, we set `tabindex` to each element's sequencing. If one of the form element is this PrimeNG dropdown or multiselect then it should also be highlighted using the `outline` CSS property. Then there is `autofocus` concept too. – Kunal Dethe Jul 21 '20 at 10:12
Updated the Stackblitz link with proper demo for Dropdown and MultiSelect element focus behavior. Please check. – Kunal Dethe Jul 21 '20 at 10:19
1

@KunalDethe Look In your example, on my side the tab press is working for both items. but the set focus by click doesn't work. I make it work by my example. Please have a look at the example. https://stackblitz.com/edit/primeng-multiselect-autofocus-kywbgn?file=src%2Fapp%2Fapp.component.ts – Ashot Aleqsanyan Jul 21 '20 at 10:26
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/218271/discussion-between-kunal-dethe-and-ashot-aleqsanyan). – Kunal Dethe Jul 21 '20 at 10:34
please update your answer as per the solution mentioned in your latest Stackblitz link. I can then mark the answer as accepted. – Kunal Dethe Jul 22 '20 at 08:54

PrimeNG Multiselect autofocus

1 Answers1