[Bug]: Failing tests with MUI Dialog, react-hook-form and [email protected]

[ddolcimascolo]

What version of React Router are you using?

6.12.0

Steps to Reproduce

I will provide further reproduction steps, hopefully a reproduction repo too if I manage to reproduce it outiside of my (closed source) app, but I wanted to let you know and maybe gather comunity feedback in the meantime.

General problem

• Lots of tests are failing when when updating RR to v6.12.0
• All components under test share a common pattern
  • Open a MUI <Dialog /> containing a form.The form is managed by react-hook-form
  • Fill in the form, click the submit button. This triggers react-hook-form handleSubmit that calls a callback function
  • The callback function closes the Dialog, calls a backend endpoint, and then uses RR's navigate function to route the user somewhere else

A typical submit callback looks like that

function submit(data) {
  closeDialog();

  callBackend(data).then(res => navigate(`/another/route/${res.data.id}`));
}

with

• closeDialog being a setState(false) baiscally, the state variable being used as the open prop to control the Dialog
• navigate is the returned fucniton from useNavigate()

In tests, the Dialog is not removed. In the actual produciton app, everything is fine.

I suspect this is something related to the use of startTransition in 6.12.0, but I cannot pinpoint what might be the problem... Any help will be really appreciated 😅

Thx,
David

Expected Behavior

The Dialog is removed from the DOM upon submission

Actual Behavior

The Dialog is not removed from the DOM

[brophdawg11]

Due to this and a few other instances that popped up, we decided to move the usage of React.startTransition behind a future flag in 6.13.0 - so upgrading should fix these issues and then you can opt-into the usage of React.startTransition when you are ready.

[ddolcimascolo]

Roger that. Thx for fixing