fix(select): fix prop not working properly on hidden select input

[royeden]

Hello!

I've noticed that <Select /> components don't honor the required attribute properly, so this PR assigns a value attribute (same one assigned to the select element) to the input inside of <HiddenSelect />.

I wanted to add a test for this issue but I ran into the pointer-events issue that makes you skip all the current Select tests.

[netlify]

👷 Deploy request for kobalte pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	4e0c76a

[jamesarosen]

This also happens with the Combobox HiddenSelect.

For anyone who wants to fix this in user-land while we wait, this is working for me:

function MySelect(props) {
	/**
	 * If `props.required`, <HiddenSelect> renders an `<input required>`, but it
	 * doesn't update its value.
	 * @see https://github.com/kobaltedev/kobalte/pull/538
	 */
	const syncHiddenInputOnChange = (e: HTMLElementEventMap['change']) => {
		const select = e.currentTarget as HTMLSelectElement | undefined
		if (!select) return
		const input = select.parentElement?.querySelector('input')
		if (!input) return
		input.value = select.value
	}
	let hiddenSelect: HTMLSelectElement | undefined
	onMount(() => {
		hiddenSelect?.addEventListener('change', syncHiddenInputOnChange)
		onCleanup(() => {
			hiddenSelect?.removeEventListener('change', syncHiddenInputOnChange)
		})
	})

	// ...

	return (<Root {...props}>
		<HiddenSelect ref={hiddenSelect} />
		...
	</Root>)
}

[jamesarosen]

Actually, that doesn't quite work because it doesn't sync on mount.

I tried extracting value and passing it to both <Root> and <HiddenSelect>, but there's a type mismatch. In Root, value is Option | Option[] | null | undefined, whereas in HiddenSelect it's string | number | string[] | undefined.