[@mantine/core] next try fixing transition issues

[cyantree]

(Hopefully) fixes #3126 #5193 #5849.

As I found out earlier it's probably related to the automatic batching in React. Therefore this fix uses flushSync() to enforce the state update at the right moment.

I hope that this will fix the issue.

[rilrom]

Nice work @cyantree! I can no longer reproduce the issue.

I'm curious why the changes to modal tests were necessary?

[cyantree]

I think that's because at first the component is unmounted and therefore the state is exited. This leads to the children not being rendered at all. This in effects leads to the test failing.
https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/core/src/components/Transition/Transition.tsx#L71

This is because with my changes the state transition from exited to pre-entering doesn't happen in the same frame anymore (this is done because ReactDOM.flushSync() can't be used within a running render pass).

So setting transitionDuration: 0 disables the transition and renders the children directly. IMHO that's an acceptable behaviour.

However I'm happy for any suggestions as this (at least for me) is a finicky bug.

[macjuul]

I can also confirm it solves the problem on my end, thanks so much!

[rtivital]

Thanks everyone for validation! @cyantree, thanks for the fix!

[robmonie]

This change was made quite some time ago but hopefully someone can help with an issue i'm facing which is preventing me from upgrading past 7.6.1.

I've found that since this change was introduced, any code that incorporates useTransition such as modals and popovers fail to render the content of the Modal or popover in tests when using testing library and vitest / jsdom. It may be the same with jest but i'm not sure.

I've been able to isolate it to the moving of setStatus(shouldMount ? "pre-entering" : "pre-exiting"); into requestAnimationFrame and ReactDOM.flushSync. When I revert this, everything works again.

It's worth noting that due to issues with js-dom being flakey with requestAnimationFrame, I needed to stub that as per https://testing-library.com/docs/svelte-testing-library/faq/ so now the code executes but the issue remains.

I'm currently looking into whether this is something I can work around within vitest / react testing library etc but I suspect i'm not the only person to face this and maybe someone else has figured it out?

UPDATE: As usual, asking for help generally helps one solve their own problem :-)

For anyone else coming across this, i've found that combining the requestAnimationFrame stub mentioned above, and writing my tests differently fixes the issue. The request animation frame introduces some asynchronicity into the equation that wasn't being accounted for in the original tests. This is more an issue with the testing tools than mantine.