Select: Blur is fired before change resulting in invalid form

[juliepk]

Describe the bug

I have a form with a select wrapped in a form field, and I want the form to be validated on blur. The blur event on the select is fired before the update event when selecting an option, and with validateOnValueUpdate=true on the form field, this results in ab invalid input a few milliseconds before the change event fires

Reproducer

https://stackblitz.com/edit/vitejs-vite-czkzcy?file=src%2FApp.vue

PrimeVue version

4.2.1

Vue version

3.x

Language

ES5

Build / Runtime

Vite

Browser(s)

Chrome 131

Steps to reproduce the behavior

1. Go to https://stackblitz.com/edit/vitejs-vite-czkzcy?file=src%2FApp.vue
2. Select an option in the select

Expected behavior

Blur event should not fire when clicking on an option

[mertsincan]

I think this is not related to Form component. Could you please try it without Form? Does it have the same behaviour?

[juliepk]

It has the same behaviour without the Form component yes. It just gets visible with. It's also an issue with multiselects when clicking on the checkbox; blur ir fired when clicking on it.

[eyal-egf]

I'm having the same issue..
The main problem this creates is that the validation message flickers for a split second when I validateOnBlur...

Related issue >>
In general the weird 'double focus' on the Select component is not a good pattern imo,
If you tab out, or select option from dropdown than the field dropdown blurs and then focuses
again on the field element.. This was driving me nuts while trying to implement event tracking on the form (user focus/blur from fields) because when I tab out of a Select, I would get a 'blur' event, then 'focus' event on the next field and immediately another 'focus' event on the Select field I just blurred from..
In short, when a use selects an option, there should at least be an api option on prime's end to blur completely out of the component 'blurOnSelect' or somehow fix the root cause of the double focus issue.

[eyal-egf]

@mertsincan
Has this been looked at?

This issue is basically a breaker for us in terms of using your forms.

We're currently unable to hack a situation where our form dropdowns work properly.
No matter what we do, they flicker an invalid state.

The resolver is validating on stale value, instead of triggering after.. I think it has to do with the layered blur events
you have in the Select components. Should I try to open a PR for this? or is there someone working on it?

Appreciate your work 🙏

[eyal-egf]

Opened PR: #7170

Tested locally, this solved my issue.