Hi everyone, I'm experiencing a strange rendering bug where components inside a modal frame are being rendered on the module's page instead of inside the modal's container. This issue only occurs on Windows machines, while it works fine on Mac. I'd like to give you a brief overview of how the project is structured:
Setup:
I have a module (let's call it module1) containing a button that opens a modal frame (modal frame1).
Inside modal frame1, there's a simple table with data.
The Problem:
When I open an app or a module that includes module1, the table (which should be inside modal frame1) is visible in the background of the module, outside of its intended modal container.
Here's a screenshot that shows the strange behavior (i highlighted in red the components of module1):
As you can see there is a faded table behind (look at the blue arrow), which is not supposed to be there, but should instead be inside of modal frame1.
Inconsistent Behavior:
Interestingly, when I open module1 in editor mode, everything functions correctly without any rendering issues.
As you can see, the content of this table is what appears in the background of module1
Console Errors
When this rendering problem occurs, I see the following warnings in the console (i dont know if they are related but ill show them just in case):
Multiple warnings about using legacy contextTypes API:
Warning: r uses the legacy contextTypes API which is no longer supported and will be removed in the next major release. Use React.createContext() with static contextType instead.
Warning about defaultProps for function components:
Warning: Yn: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
Warning about deprecated findDOMNode:
Warning: findDOMNode is deprecated and will be removed in the next major release. Instead, add a ref directly to the element you want to reference.
Warning about legacy childContextTypes API:
Warning: n uses the legacy childContextTypes API which is no longer supported and will be removed in the next major release. Use React.createContext() instead.
These warnings seem to be related to the use of outdated APIs in Material-UI (version 3.9.3) and possibly in custom components.
Questions
Has anyone encountered a similar issue with modal rendering in Retool?
Could this be related to the version of Material-UI being used (3.9.3)? If so, is there a recommended way to update it within Retool?
Are there any known conflicts between Retool's component system and certain versions of Material-UI or React that could cause this behavior?
Any suggestions on how to troubleshoot or resolve this rendering issue?
Any insights or guidance would be greatly appreciated. Thank you in advance for your help!
Very odd bug with the modal display. What version of Windows are you using?
What browser/browser version are you using where you see these issues?
These issues you described in the console could be related to the version of retool and as you mentioned the version of Material-UI being used. Are you self hosting Retool? If so what version are you running?
I'm using Windows 10 Pro with the latest updates as the operating system.
As for the browser, I'm using Chrome version 127 (though the same problem is present on other Chromium-based browsers like Edge).
My company is not self-hosting Retool; we use the cloud version which to my knowledge is automatically updated.
This is a very odd bug that i have not seen before
You are correct that being on the cloud should give you the most up to date version of retool.
Could you share some screen shots of the modal set up?
The timing is definitely suspicious that it coincides with that update. If the module and modal had been working fine previously with no changes made then I could see the update being the only variable changed and potentially the culprit.
You may need to delete the modal and build it again
Also we can look more into this during a Retool office hours session as well. Let me check with our team in the meantime on if the update could be having some unindented effect.
First, let me give you some additional information to better explain the problem:
On Windows 11 with the latest updates, the problem is still present.
Every module that uses a modal frame has this bug, so all of the modules using a modal frame in this project are affected.
Any component inside the modal frame will be rendered in this "weird way", regardless of whether there is only one or many components - they will all be rendered like that.
Apps with modal frames work perfectly, so this bug only occurs with modal frames used in modules.
Apps that use a module with a modal frame (like module1) will have the same rendering issue whether they are in preview or edit mode.
Since it's not only module1 that has the problem, I created a new simpler version as a demo to make it easier to explain and understand.
Module
The module is very simple; it only has a modal frame.
@Andrea Thank you so much for the added details and the screen shots!
This will help a lot in getting to the root of the problem.
From another user that had this bug, they found that they were able to fix it by toggling off the WidgetGrid toggle. As this was the part of our new changes that we believe caused this issue and we are still working on getting the bugs out of
I apologies for the inconvenience. The one bright side is with the bug begin consistent across modules with modals is that we can triage and reproduce the bug for our engineers to fix.
Yes! That was it. After disabling the WidgetGrid toggle, the problem disappeared!
Now all the modal frames inside modules are rendered correctly.
Thank you, @Jack_T, for all the help!
