Vue PrimeVue dropdown with confirm

There is no confirm feature on PrimeVue dropdown when selecting an item, but with the following workaround it’s easy to add.

I badly needed a confirm dialog in my latest project and I sadly realized that there was no such feature in PrimeVue's Dropdown component. What I was about is to ask the user if she really would like to continue because that involves some side effects. On selecting "No" the dropdown would just close and nothing happens.

Before starting to redesign that part of the application I gave it a go to fix this first, in hope of skipping an unwanted refactor. I googled for a possible solution a bit but found nothing. Then I remembered from the past that in such situations overriding the given method and then re-setting it is one way to go. Ultimately this worked here too.


Breaking it down

What's happening here is that when the user clicks on a dropdown item, dropdown's hide() method is saved to a temporary variable and then it's set to undefined (that, is, nulled). This stops PrimeVue to close the dropdown, so it stays open while the confirm dialog is opened.

Of course this wouldn't stop the dropdown to set the clicked item as the selected option. To overcome this, I manually set the selectedOption to the dropdown's modelValue property, which is still containing the old value. So at this point the dropdown is opened and its value is latest selected option, not the new one the user cicked on.

Then the confirm dialog opens which has two outcomes: "accept" or "reject". In the "accept" part the selectedOption is set to event.value, which is the actually selected option from the user. Additionally the hide() method needs to be restored on the dropdown in both parts, which is as easy as assigning the previously saved method to the dropdown.


This is an easy and painless fix for this issue. However, I think such feature should be baked into PrimeVue (and PrimeNG, PrimeReact, etc), as this would come really handy in many situations.

0 comments Comments