p-dropdown selection as source to retrieve data (http request) : cursor nav causes too many onChange events or lack of onSelect event

[rekna1]

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

[] bug report => Search github for a similar issue or PR before submitting
[ x ] 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

Plunkr Case (Bug Reports)

It is impossible to use p-dropdown in a use case scenario where the selected value of the dropdown is used to retrieve data using eg. http request. Problem is dat onChange fires every time one uses cursor to navigate through items. Would mean that for each an http request is send, which is not desired and unefficient.

It would be nice if there was a separate select event that fires only when an option is clicked or enter is used to confirm selection. Should also fire when the selection is cleared by clear button or a separate event is also possible e.g. onClear

Current behavior Too many onChange events

Expected behavior Only onChange when user effictively confirms selection or separate onSelect event.

Minimal reproduction of the problem with instructions Any What is the motivation / use case for changing the behavior? There is (as far a I can see) no way to get an efficient way to use p-dropdown is this scenario (as a source to populate another list of items)

Please tell us about your environment:

Windows 10, npm, VSCODE, IIS,

Angular version: 11.1

PrimeNG version: 11.2

Browser: [all]

Language: [all ]

[sameerthekhans]

I think this should be a bug instead of a new feature, There are issues already reported #8355 and #5335

Adding logical reasons from those tickets below

The problem is that value should only be changed on SELECTING a value, not while NAVIGATING with up/down arrow keys?

this is a design flaw... dropdowns don't work this way. The user is free to "browse" the list before making a selection. A selection is made only by actively clicking on an item or pressing ENTER with the item highlighted.

The current implementation is very strange and non-intuitive.

the onChange event of the p-dropdown component fires every time the user highlights a new item with the keyboard. This seems counterintuitive since merely highlighting a new item does not indicate the user actually intends to select it

This ticket and My Issue - There are lots of unnecessary HTTP requests made because of this issue.

HTML native select and dropdowns in other libraries(e.g. Angular Material) don't work like this, it only triggers a change event when the user clicks the item or when the user has pressed enter with the item highlighted.

Hope this ticket will change to bug or else I will create a new bug

[VarunAnandK]

how am used to overcome

1. HTML - names the p-dropdown

#invoiceselectdropdown

2. Get element using

@ViewChild('invoiceselectdropdown') invoiceselectdropdown: Dropdown;

3. Event listener

ngAfterViewInit(): void { this.invoiceselectdropdown.el.nativeElement.addEventListener('keydown', (event) => { if (event.key == "Enter") { this.AddInvoice(event); } }); }

4. Function

async AddInvoice(event: any) { if (event.originalEvent || event.key == "Enter") { // here you code }

[cetincakiroglu]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you reopen the issue so we can include it in our roadmap? Please don't forget to add your feedback as a comment after reopening the issue. These will be taken into account by us and will contribute to the development of this feature. Thanks a lot for your understanding!

Best Regards,