Dropdown with filter property should be open when focus event is on field

[Zuiago]

[ ] bug report [x ] feature request [ ] support request

Current behavior Dropdown with filter property, today if you focus is on field it needs a click to allow digitation

Expected behavior Dropdown component should open when focus is on field. This provide faster search using the filter property.

Minimal reproduction of the problem with instructions You can face the issue on offical PG page https://www.primefaces.org/primeng/#/dropdown

What is the motivation / use case for changing the behavior? To make accessibility more easy for users that use "Tab" button for navigation in the page.

Please tell us about your environment:

• Angular version: 2.0.X 4.3.2

• PrimeNG version: 2.0.X 4.1.2

• Browser: [ Chrome | Firefox | Edge | Safari ]

• Language: [TypeScript 2.3.4 | ES6/7 | ES5]

[Zuiago]

Maybe can i use yours autocomplete component. Now i can see it. But is a interesting feature for dropdown component. Thank's!

[cagataycivici]

You can use alt + down as well to open it.

[maplion]

@cagataycivici Was there/will there be any attempt to change this behavior to the suggested (i.e. make it so when you tab into the dropdown it automatically opens the dropdown and puts the cursor in the filter)?

[vascorebolo]

From an accessibility point of view, it would make a lot of sense if when opening the dropdown with alt + down, the filter would be focused. I was testing this and I was unable to figure out how to go to the filter input using only the keyboard. Is there a way to do it?

[maplion]

@vascocsilva Not that I know of; the best I could do was use the arrow keys to get to things in the list (which in a long list is not convenient at all -- and usually filtered dropdowns are long lists). From a standard user point-of-view, they aren't going to alt + anything. For simple usability, it would make sense that on focus it automatically opens the dropdown and sticks your cursor in the filter list as the priority should be the filter list and not the dropdown (otherwise people would use the regular dropdown component). I'm really surprised more people don't have an issue with this.

[maplion]

@cagataycivici Is there a reason this was closed? I really think this should be reopened as it is not an existing feature and this thread was not resolved.

[pedromrb]

Agree, if building something and using this component and the requirements include accessibility this should be resolved.

[mstruchen]

Having this automatically open when you tab into the dropdown would be a hug improvement for the user experience. Please reopen and resolve.

[kc13greiner]

@cagataycivici Please implement this feature. Spacebar and Alt + (downarrow) get to the dropdown items, but what about the filter?

[CheckMater]

You can also try something like this:

<p-dropdown #theDropdown (onFocus)="onDropDownFocus(theDropdown)" [options]="theoptions" [filter]="true"></p-dropdown>

In your component:

onDropDownFocus(dropdown) {
  if (!dropdown.selfClick) {
    dropdown.show();
  }
}

Tested with version 8+ and it works properly.

[fabiocurtisvolpe]

Do it as follows

@ViewChild("dp") dp: Dropdown;

ngAfterContentInit(): void { setTimeout(() => { this.dp.show(); }, 100); }

Using onDropDownFocus for some reason is not allowing to reopen the dropdown

[JaredScar]

You can also try something like this:

<p-dropdown #theDropdown (onFocus)="onDropDownFocus(theDropdown)" [options]="theoptions" [filter]="true"></p-dropdown>

In your component:

onDropDownFocus(dropdown) {
  if (!dropdown.selfClick) {
    dropdown.show();
  }
}

Tested with version 8+ and it works properly.

Was this essentially pseudocode? I cannot see a selfClick variable attached to the p-dropdown element. Using version 9 of primeng. Thanks