Primeng: Keyboard search for Dropdown

Created on 11 Jul 2017  路  7Comments  路  Source: primefaces/primeng

I'm submitting a ... (check one with "x")

[ x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior
on keypress of an alphabetic word does not selects an item in dropdown which begins with the typed word.
https://www.primefaces.org/primeng/#/dropdown
Select the combo box and type P, Paris is not selected

Expected behavior
on keypress of an alphabetic word selects an item in combo box which begins with the typed word.
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select
Select the combo box and type O, Opel get selected

Minimal reproduction of the problem with instructions
https://www.primefaces.org/primeng/#/dropdown
Select the combo box and type P, Paris is not selected

What is the motivation / use case for changing the behavior?

Please tell us about your environment:
PrimeNG showcase

  • Angular version: 2.0.X

  • PrimeNG version: 2.0.X

  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
    ALL

  • Language: [all | TypeScript X.X | ES6/7 | ES5]

  • Node (for AoT issues): node --version =

enhancement

Most helpful comment

I would also love this to be included as a standard feature of the dropdown. For form input, especially repeated input, many users are used to tabbing through the form and typing, not having to reach over for the mouse for every dropdown. Without this feature the normal and expected behavior for a dropdown is missing.

All 7 comments

Is this going to make it into a future milestone?

Bump! - It's very intuitive to start typing in classic "select" elements to find desired value so it would be very appreciated to have this feature also in Prime's dropdown :)

Current partial workaround is to enable "filtering", but it's a little bit annoying for the user (more clicks).

I would also love this to be included as a standard feature of the dropdown. For form input, especially repeated input, many users are used to tabbing through the form and typing, not having to reach over for the mouse for every dropdown. Without this feature the normal and expected behavior for a dropdown is missing.

Almost one year and nothing has been done?
It's really the minimum requirement for a dropdown.

@mlaffargue

<p-dropdown [options]="items" (keyup)="onKeyUp($event)" filter="true"></p-dropdown>

onKeyUp(event) {
    console.log(event.target.value);
}

OR

<p-dropdown [options]="items" (keyup.enter)="onKeyUp($event)" filter="true"></p-dropdown>

Set to 6.1.4

This issue happen again in the version 7.0.5

I think the root cause is in file primeng/src/app/components/dropdown/dropdown.ts, line 54,

<input #filter type="text" autocomplete="off" [value]="filterValue||''" class="ui-dropdown-filter ui-inputtext ui-widget ui-state-default ui-corner-all" [attr.placeholder]="filterPlaceholder" (keydown.enter)="$event.preventDefault()" (keydown)="onKeydown($event, false)" (input)="onFilter($event)" [attr.aria-label]="ariaFilterLabel">

we have addition code: (input)="onFilter($event)", and this bug is happen again.

Was this page helpful?
0 / 5 - 0 ratings