Improving SelectControl - allow dynamic options list (includes workaround example)

[rogerlos]

It shouldn't be this difficult to allow SelectControl to be populated dynamically. You guys must know how bald I already am.

Anyway, here's a workaround to this, in case it might help someone else:

https://gist.github.com/rogerlos/7502541070942e16a1188dd0bb9ac2b9

Essentially, because SelectControl bails, seemingly forever, when presented with an empty options list, it's impossible to feed it dynamically. (For what it's worth, that is not how I would expect a property described in the documentation as "optional" to work.)

My workaround returns a placeholder options array until the fetch from the server is done. It should only fetch the content once per editing session (at least until someone F5s).

Anyway, this is because of line 40 in the component:

return ! isEmpty( options ) && (

Which leads to the control not being returned at all if the options array is empty. I can see a couple of friendlier approaches:

• Instead, use a placeholder option--maybe "Not available"?, and set the control to disabled (...which I know is another feature on everyone's select wish list, mine too).
• Let the "returns nothing" mode be default but allow the user to set a parameter which returns the "placeholder and disabled" if they explicitly ask for it.

If the control returned no matter what, dynamic loading of its options would be a doddle.

[youknowriad]

Select control can already be disabled (it accepts any prop targeted for the select element). See also #7384 for a more dynamic select control.