Select filter in forms (FormField): The filter input is also invalid when select is invalid.

[JoseAntonioNavasSolutia]

Describe the bug

When the select field is invalid, the select filter is also invalid. Also if we filter the filter value is the value of $field.value

Pull Request Link

No response

Reason for not contributing a PR

• Lack of time
• Unsure how to implement the fix/feature
• Difficulty understanding the codebase
• Other

Other Reason

No response

Reproducer

stackblitz don't work

Environment

Windows 11

Vue version

3.5.13

PrimeVue version

4.2.0

Node version

20.11.10

Browser(s)

Chrome

Steps to reproduce the behavior

.

Expected behavior

.

[JoseAntonioNavasSolutia]

code: https://stackblitz.com/edit/hrtvtebf?file=src%2FApp.vue

[david-rohrschneider]

Hello, I can confirm this. This is also a bigger issue - for multi select fields inside a form or form field, every checkbox and filter input is added to the form state. This breaks the entire form, which is why the select components are not usable with forms

[cotufaloschiflones]

Hello @david-rohrschneider thats true, I have post something similar here: #7158

The select on filter create a 'undefined' field in the $form model just to check things etc, this is the main reason why the resolver is triggering, because Form component is updating internally the $form object exposed through v-slot (creating inside form a formfield object with the key undefined, and the value of the filter input text) and thats what is triggering the validation on the rest of the fields, even if they are pristine.

Because of that, I'm not able to validate every field when changes (only that field and only when modelValue of that field changes) and validate all fields on submit...which is the behaviour what I want

But anyways you still can remove the error style in the filter input with PT, like so:

:pt="{ pcfilter: { root: 'border border-secondary-0 hover:border-secondary-200 focus:border-secondary' }}"

Hello, I can confirm this. This is also a bigger issue - for multi select fields inside a form or form field, every checkbox and filter input is added to the form state. This breaks the entire form, which is why the select components are not usable with forms

[david-rohrschneider]

@cotufaloschiflones does not solve my Problem, since the select field needs to be validated for emptyness and i need the on-blur validation. Im sure this can be solved since other open source frameworks offer this functionality already. I didnt chrck but there was a PR fixing this here already

[cotufaloschiflones]

@david-rohrschneider I know, the answer is for @JoseAntonioNavasSolutia to avoid the input filter state get marked as invalid (visually).

I was mentioning you because you were talking about the behaviour of select and filtering, because of that I post the answer, I just recently open an issue with this (#7193). But your problem is the same as mine (kind of), but we need primevue fix first how they are doing the filtering approach because it has some caveats or side effects

[david-rohrschneider]

@cotufaloschiflones i see, did you try it with latest PR?

[cotufaloschiflones]

@david-rohrschneider no, do you have the link to this PR? Im using the last version of primevue anyway

[david-rohrschneider]

@cotufaloschiflones i thought its this one but its not relevant it seems

c1f3bda