[TimezonePicker] Warning: Cannot update during an existing state transition

When opening, clicking and generally using the TimezonePicker the console throws the following error: Warning: Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state.

I thought it may be something with my local setup (just testing out BaseWeb and TimezonePicker was my first component to test), but following the link from the docs page to CodeSandbox, the error is also reported in the console there: https://codesandbox.io/s/pulvl?module=/example.js

Expected Behavior

No errors in console.

Your Environment

Tech	Version
Base UI	v7.8.0
React	16.8.6
browser	Chrome 75.x

• I have searched the issues of this repository and believe that this is not a duplicate.

[houmark]

I’m not sure this a good first issue anymore 😃

I have a tight deadline, but do plan to collaborate in the future with fixes such as for example the missing error / positive state on some components. Those seem like good first issues, while this one seems to be potentially very breaking for several components that depend on it.

[jh3y]

I’ve narrowed down the source of the issue here 👍 #1291 introduced a conditional inside getRequiredItemProps of src/menu/stateful-container#L210 that triggers a setState.

This setState is updating the aria-activedescendant on the Menu being used in any Select component. This includes TimezonePicker that uses Select.

This happens on first render as I believe every option is mapped invoking getRequiredItemProps at src/menu/menu#L64.

A solution could potentially be made inside Menu by explicitly updating an element ref attribute instead of triggering an entire state change. This would require an element ref for the List component and potentially a ref for the current activedescendant.