Modules Behave Differently in Modals

  • Goal: I want to use a module as part of a modal and specifically, I want to be able to pass along input values that make modules behave certain ways.

  • Steps: create a module that relies on certain input values, and then import that module into a modal. Then pass in a certain input value and see if that has any effects.

  • Details: I am triggering a query based on that module's input value, and that is not getting triggered as far as I can tell.

I know you always ask for data dumps, exports and screenshots, but I don't feel comfortable sharing that data, as it includes certain personal information. I hope you can reproduce the issue based on the information above.

Hi @emozio,

Let me see if I can reproduce this.

So to confirm, you want the query to run on input value change?

Also in the title you said module inside a modal, while in the first line you said module as part of a module :sweat_smile: Just wanted to clarify what the module that has the query you want to run is inside of.

I also found this forum post about running queries in modules on input changes, have you tried reproducing this logic?

Also I found this forum post about triggering queries in a module from parent apps, it could be useful as well.

Dear Jack,

I apologize for the late response, and the rather confusing post. After reading it back myself, even I couldn't figure out what the heck I was talking about :stuck_out_tongue:

Anyway, as far as I can remember, the issue lies in importing modules into modals. There, it seems like certain Input properties aren't getting interpreted the same way, in my particular case when they should trigger a query.

P.s. Again, sorry if this didn't come across. When you're in the weeds building your app, it's often difficult to switch from "dev" to "friendly, clear and well-written forum mode", if you know what I mean. But that's not an excuse, I should take more time in the future. :wink:

1 Like

No worries at all!

Happens to the best of us. I find that users sending Loom videos is the best way to see app behavior as I am very visual in learning/understanding :sweat_smile:

Totally understand, Retool is such a technical product and my brain will run away with any ambiguity :melting_face:

Hopefully the modules rebuild will help address this :crossed_fingers:

So the inputs that live in the modal's state are not being passes correctly/as expected into the modules.

In the way that modules should be able to take inputs from their parent app/component to then trigger queries in the module. Correct?

If you have a video recording I can reproduce this and send a bug report over to our engineers :saluting_face:

It’s been a while since I last addressed this topic, but I think I’ve finally figured out what went wrong.

The issue stemmed from using an Input called "id," which seems to be a reserved term. Interestingly, Retool doesn’t provide any warning when you use "id" as the name for an Input.

What happens in this case is that when the module loads, the id gets automatically overwritten with the module instance's ID (for example, "someModuleName"). This was the root cause of my modules not behaving as expected. At first, I thought the issue was related to the context of modals, but it turned out to be a coincidence that this was the only place I encountered the problem.

To avoid this confusion in the future, I would strongly suggest that Retool provide a warning when users attempt to use id as the name of an Input. It’s very difficult to troubleshoot this kind of issue, and a simple alert would save a lot of time.

As for the solution on my end, I resolved it by renaming the Input from id to ID (in all caps), since it’s case-sensitive. This approach worked perfectly for me.

Great detective work!

Apologies for the confusion. I fully agree we should either change things so that 'id' is not revered or give users a proper warning.

I just created a ticket for this and forwarded your findings to our UI team member who is working on the module overhaul.

Thank you for sharing your work around as well!