Native html form support for `Select`

Since Select doesn’t render a native select element, it doesn’t works with the native html form element.

Solution: Add a visually hidden select element inside Select.

Problem: Native select element only accept string value, this means we have to remove support for object value in Select and only accept string value.

[martinpengellyphillips]

Yeah, I think it depends on the philosophy of the library. In this case, where it follows a more composed building blocks approach, I think supporting objects in this way isn’t needed.

[jprochazk]

I wonder if it makes sense in the end to allow the “object as a value” in my API.

Unless I’m misunderstanding something, with this approach, the user must have a mapping of option.id -> option in order to retrieve option using the value received in onChange. If you add something like compareFn, then you could also directly return the object to the user in onChange:

<Select
  compare={(option) => option.id}
  onChange={(option) => console.log(option)}
>
  <SelectOption value={option}>
    {option.label}
  </SelectOption>
</Select>

But this is not a deal-breaker, and there is definitely benefit in keeping things simple.