[SelectMenu] Add prop to manage the input's form HTML attribute

[LeonidevFR]

Description

Hi,

This issue is linked to the first I wrote : #3056.

My initial goal was to be able to validate a form for each row of a Table. Every row contains different inputs and one can validate the changes on the row by clicking an action button. I'd like every row to be wrapped inside a form tag.

To do so, I just created, outside of my table, as many form as there are rows, and linked the inputs from each row to it's corresponding form to be able to validate it.

A few extracts :

 <form
    v-for="(item, index) in list"
    :id="`${index}-form`"
    :key="index"
    @submit.prevent="save(param)"
  />

...

<u-input
        v-model="params.row[key]"
        required
        :form="`${params.index}-form`"
        @select.stop
        @click.stop
      />

...

 <template #actions-data="params">
      <u-button type="submit" :form="`${params.index}-form`">
        Submit
      </u-button>
    </template>

The issue now is that I also use some SelectMenu items in some of my columns, and by inspecting the code I can clearly see that it wraps an input inside it, but I'm not able to pass the form attribute as a props.

To be more clear, currently here's a bit of the code inside the SelectMenu.vue component :

   <input
      v-if="required"
      :value="modelValue"
      :required="required"
      :class="uiMenu.required"
      tabindex="-1"
      aria-hidden="true"
    >

I'd like this to be like so, to be able to clearly state the value on the input's form HTML attribute :

   <input
      v-if="required"
      :value="modelValue"
      :required="required"
      :class="uiMenu.required"
      :form="formAttribute"
      tabindex="-1"
      aria-hidden="true"
    >

I'm gonna try it locally and open a PR for that.

Additional context

No response

[LeonidevFR]

Linked a PR