Baseweb: React 17.x; StatefulMenu and Select throws errors

[houmark]

Current Behavior

In React 17.x at least StatefulMenu and Select throws an error. This may affect other components that uses the same BaseWeb code.

For the StatefulMenu this happens just when activating a menu, for Select it happens when selecting an item.

Part of the stack trace below:

react-dom.development.js:3994 Uncaught RangeError: Maximum call stack size exceeded.
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070)
    at executeDispatch (react-dom.development.js:8243)
    at processDispatchQueueItemsInOrder (react-dom.development.js:8275)
    at processDispatchQueue (react-dom.development.js:8288)
    at dispatchEventsForPlugins (react-dom.development.js:8299)
    at react-dom.development.js:8508
    at batchedEventUpdates (react-dom.development.js:3739)
    at dispatchEventForPluginEventSystem (react-dom.development.js:8507)
    at attemptToDispatchEvent (react-dom.development.js:6005)
    at dispatchEvent (react-dom.development.js:5924)
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority$1 (react-dom.development.js:11276)
    at discreteUpdates$1 (react-dom.development.js:22413)
    at discreteUpdates (react-dom.development.js:3756)
    at dispatchDiscreteEvent (react-dom.development.js:5889)
    at focusOn (setFocus.js:4)
    at setFocus.js:31
    at activateTrap (Trap.js:109)
    at HTMLDocument.onTrap (Trap.js:148)
    at Object.onFocus (stateful-container.js:303)
    at focusVisible.js:154
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070)
    at executeDispatch (react-dom.development.js:8243)
    at processDispatchQueueItemsInOrder (react-dom.development.js:8275)
    at processDispatchQueue (react-dom.development.js:8288)
    at dispatchEventsForPlugins (react-dom.development.js:8299)
    at react-dom.development.js:8508
    at batchedEventUpdates (react-dom.development.js:3739)
    at dispatchEventForPluginEventSystem (react-dom.development.js:8507)
    at attemptToDispatchEvent (react-dom.development.js:6005)
    at dispatchEvent (react-dom.development.js:5924)
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority$1 (react-dom.development.js:11276)
    at discreteUpdates$1 (react-dom.development.js:22413)
    at discreteUpdates (react-dom.development.js:3756)
    at dispatchDiscreteEvent (react-dom.development.js:5889)
    at Object.onFocus (stateful-container.js:303)
    at focusVisible.js:154
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070)
    at executeDispatch (react-dom.development.js:8243)
    at processDispatchQueueItemsInOrder (react-dom.development.js:8275)
    at processDispatchQueue (react-dom.development.js:8288)

Expected Behavior

No errors :)

Your Environment

| Tech | Version |
| ------- | ------- |
| Base UI | v9.103.0 |
| React | 17.0.1 |
| browser | Latest Chrome |

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

[chasestarr]

Thanks for reporting @houmark We're looking to address the react 17 issues over the next two weeks

[chasestarr]

Can you please share a repro case? This sandbox has react 17 installed https://codesandbox.io/s/tq2u4?module=src/example.js

[GraxMonzo]

Same error with

Tech | Version
-- | --
Base UI | v9.104.0
React | v17.0.1
InertiaJS | v0.6.1
browser | Latest Chrome

[chasestarr]

@GraxMonzo Can you please share a reproduction case?

[GraxMonzo]

@chasestarr Unfortunately I couldn't reproduce this case with codesandbox

[chasestarr]

Consider providing a github repository if you can reproduce with create-react-app or similar

[GraxMonzo]

@chasestarr I'll try to deploy and give repository access tomorrow

[matchatype]

I'm facing this issue with React 17.x.x, but only if the Select component is within a modal. Here is a... working 🤷‍♂️ codesandbox. That's because I'm unable to reproduce the issue, no matter how close I get to my actual config. The best I can do is provide you with a full log of the issue.

Interestingly, the issue arises when, after opening the select menu, I click on any of the options with the mouse. Using the keyboard works just fine. Here is a quick screencast showing behavior using keyboard first and mouse last. Everything works just fine up to react 16.14.0.

[GraxMonzo]

@chasestarr I've sent you an invite. Checkout readme file for details

[houmark]

Our issues with Menu and Select was also either in a Modal or a Drawer.

[chasestarr]

Thanks everyone for the additional detail. I'll try to locally reproduce the error.

@GraxMonzo Not sure how you shared it. I didn't get any email or anything from github notifying Nevermind, got it now