HTML5 required validity does not work with OSelect component with a placeholder

[urkle]

Overview of the problem

Oruga version: [0.7.0]
Vuejs version: [3.3.13]
OS/Browser: Firefox 125.0.3 on macOS

Description

When using an OSelect component with a placeholder, the component shows as "valid" when no option has been chosen.

Steps to reproduce

const value = ref(null);
const mySelectRef = ref(null);

<OSelect ref="mySelectRef" v-model="value" placeholder="Select me!">
  <option value="pickme">Pick me</option>
</OSelect>

Expected behavior

mysSelectRef.checkHtml5Validity() === false

Actual behavior

mysSelectRef.checkHtml5Validity() === true

Additional details

Upon inspecting things further the "value" of the select element is the placeholder text "Select me!" instead of being blank. This is due to the option having the :value="null" thus no value attribute is actually set on the option so the browser falls back to the inner text of the option.

This also occurs in the current 0.8.9 and also occurs in Google Chrome. Thus it is not isolated to a specific oruga version nor browser.

Possible solutions

1. use empty string "" as the not-selected value. This will fix the issue in part as the browser will correctly understand the chosen value. But it messes with the modelValue if the user really wants null to be unselected.
2. customize checkHtml5Validity() for this component handle this situation explicitly.

[blm768]

I wouldn't just customize checkHtml5Validity; we'd also want the underlying <select> to register as an invalid element on the browser's side of things so it blocks form submission. As far as I'm aware, the empty-string-valued option and setCustomValidity are the only viable options there. and the latter has its own issues; for instance, it requires the caller to select a validation error message, which may not match the browser's default.