Add placeholder support to Select

[bitpshr]

Enhancement

It would be nice to be able to add a placeholder to Select.

Package Version: latest

Expected behavior:

w(Select, {
	placeholder: 'Choose an option',
	options: dataSmall,
	value: selectValue,
	onChange: (option: OptionData) => {
		this.setState({ selectValue: option.value });
	}
})

Actual behavior:

w(Select, {
	options: dataSmall,
	value: selectValue,
	onChange: (option: OptionData) => {
		this.setState({ selectValue: option.value });
	}
})

[smhigley]

This was initially left off because native Select doesn't support a placeholder. It's easy to add for the custom single-select, but how should it work for native single-select? I think the options are either:

1. Make the first option a selected disabled option
2. Have a separate <span> present and absolutely positioned over the input if no option is selected / value is undefined

I'm more in favor of (2), since IMO a placeholder shouldn't affect the actual options, but I know a lot of people use (1) as a select placeholder hack

[bitpshr]

I vote for leaving out placeholder support for native selects altogether. It's tough to use the span trick reliably across mobile browsers since their UIs are all implemented differently. If we need to support this property for native mode, I vote for option 2.

[bitpshr]

I spoke again with @smhigley and we decided placeholder support for custom, non-native Select components makes sense for beta4.

[bitpshr]

🚀🚀🚀