Select: Weird bug with options state

[edizcelik]

On Tinyman, we have this situation:

• We use Select to render a dropdown menu on a table row to give users a menu of additional actions that they can take.

• These menu options are dynamically determined. For example, "view farms" option only show up if that particular pool has farming programs. To be able to determine that, we make a request to fetch farming programs for the pool on that row. So, we have 6 options when Select component first renders, then we update the options to add "view farms" option. However, this change in "options" prop is not reflected on SelectContext's state. There are still 6 items (options other than "view farms") within the SelectContext's options state. And, this leads to all sorts of strange behaviors. For example, when the menu is first opened, "view farms" is highlighted as if it was the focused item but focusedOptionIndex is still -1. Also, "view farms" option is skipped when navigating between options with the keyboard arrows since it isn't included in SelectContext.

We solved this by waiting the async process to complete until we render the Select component. After that it works as expected, ie. SelectContext's options state has all 7 options as expected.