I am currently developing a professional project in a company using the T3 stack (Next.js, React, Typescript and tRPC) and I am facing an issue with a few of my components which have controlled states to open, like an Modal (with a form to get user input) or a Filter dropdown, that always get closed when I open a new tab of the same application.
Here's the situation:
- I open the application in a browser tab.
- I trigger the modal and start inputting information in the form.
- Meanwhile, I open another tab within the same application.
- After interacting with this second tab (when mouting or reloading), I navigate back to the initial tab where the modal was originally triggered and it closes itself, losing all the data I was inputting.
This issue has become a significant concern within our application, especially since this modal typically requires input data regarding tables present on another page. The logical course of action is to open a new tab and navigate to this relevant table to acquire the necessary information. However, this process becomes extremely frustrating when all the previously filled data is lost upon returning to the original tab. We are willing to try and make every new tab a new session so all tabs become truly independent.
I already tried tampering with all the refetchOnWindowsFocus and similar that I could find and set them to false. I dont know if the issue is related to tRPC's useQuery auto refetch, to nextAuth session being shared between windows and tabs, to react states being updated worngly high in the DOM tree and end up re-rendering everything. None of my attempts worked.
My primary suspition is still tRPC or nextAuth because those are the first things that pop up in the network tab of devTools right before closing the modal.
