MultiSelect: No value available when submitted in a form

[felldo]

Describe the bug

The form component MultiSelect does not emit a value when it is being submitted in a form.

When you have an HTML form, you can use the attribute name to associate an input's value with it. Then, when you submit the form, you will have this data available in the form event. This works for most of the other components in PrimeVue but not for the MultiSelect and the Dropdown (#4912)

It may be because the MultiSelect does not have a value attribute defined on the input tag: https://github.com/primefaces/primevue/blob/d51f7180c72da0d888b0c714740a5fe86a057ec9/components/lib/multiselect/MultiSelect.vue#L4-L24 https://github.com/primefaces/primevue/blob/40c7c574ece11d72e39a4b2d4e78fe8f3f1a9e53/components/lib/dropdown/Dropdown.vue#L3-L28

Reproducer

https://stackblitz.com/edit/primevue-create-vue-issue-template-8ubcvg?file=src%2FApp.vue

PrimeVue version

3.50.0

Vue version

3.x

Language

TypeScript

Build / Runtime

Nuxt

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[alfred-uppercase]

try this const equipements = ref([ { name: 'Wifi gratuit', value: 'Wifi gratuit' }, { name: 'Télévision', value: 'Télévision' }, { name: 'Lave-vaisselle', value: 'Lave-vaisselle' }, { name: 'Cuisine', value: 'Cuisine' }, ... ]); < MultiSelect v-model="equipement" :options="equipements" optionLabel="name" placeholder="Équipements" :maxSelectedLabels="3" class="w-full" /> export default { data() { return { equipement: [], .... }, methods: { post() { const listingData = new FormData(); for (let i = 0; i < this.equipement.length; i++) { listingData.append('equipement[]', this.equipement[i].value); }

[felldo]

try this const equipements = ref([ { name: 'Wifi gratuit', value: 'Wifi gratuit' }, { name: 'Télévision', value: 'Télévision' }, { name: 'Lave-vaisselle', value: 'Lave-vaisselle' }, { name: 'Cuisine', value: 'Cuisine' }, ... ]); < MultiSelect v-model="equipement" :options="equipements" optionLabel="name" placeholder="Équipements" :maxSelectedLabels="3" class="w-full" /> export default { data() { return { equipement: [], .... }, methods: { post() { const listingData = new FormData(); for (let i = 0; i < this.equipement.length; i++) { listingData.append('equipement[]', this.equipement[i].value); }

I'm already using a workaround by using a 2nd component which isn't shown and emits the value when the form is submitted but this doesn't fix the underlying issue.