Unable to move components within a form

Self Hosted Retool
1

Hi there!

We are using Retool self-hosted version 3.33.20-stable and are running into an issue with forms. I was initially able to create a form with various inputs and UI components, and everything works. However, I am now unable to move or add components within the form. I can move components from inside the form to outside, and I can add and move components outside the form as usual.

This is only happening in this specific module, which makes me think that this module has somehow gotten into a bad state (other forms in other apps are fine).

I've tried disabling all browser extensions (I am using Arc version 1.40.0), force-refreshing the page, clearing the cache, cookies, etc. This also happens to me in Google Chrome and Brave. I am able to make changes by exporting it to ToolScript, making edits, and then importing from ToolScript, but that's very cumbersome.

I've taken a screen capture and I can post the exported module as well.

3

Here's a link to the screen recording: Screen Recording 2024-05-03 at 1.20.17 PM.mov - Google Drive

5

Hey @Nikhil_Kansal, i'm unable to reproduce the issue with the form in a drawer frame in a module. Have you tried adding a new form to the drawer frame, putting the components into that form and deleting the original form?

6

Hi @joeBumbaca – I've had this issue happen in two separate drawers with two separate forms, one that I just created today. My hunch is that my specific module has gotten into a bad state somehow. Duplicating the module also brings the problematic behavior along with it. Would it help for me to provide the ToolScript zip for the module?

7

@Nikhil_Kansal Feel free to send the zipped module my way so that I can take a look. If creating a new form in the module doesn't resolve the issue, recreating the module itself is likely the next best step.

8

Here's the zipped module: Policy Editor.zip - Google Drive

As you may hopefully understand, I would like to avoid recreating the module as that is likely to be very tedious and error prone.

9

I understand and I'll take a look. Did you try creating a new form in the original module?

10

I did! I created a new drawer, in which I created a new form. It exhibited the same behavior, being unable to drag components into or within the form. However, I can drag components anywhere else outside of the form.

11

I'm unable to import that module. Does it have any other modules inside of it? Can you try sending the JSON export as well?

12

I don't think it has any other modules inside it. Here is the JSON:

Policy Editor (1).json (229.3 KB)

13

Hey @Nikhil_Kansal I don't have the same issues when loading up that app. Can you send over the .har file to track the network requests for when you are attempting to move the components? Thanks!

Collecting the network traffic file (.har)

  • Open up the Chrome Developer tools (Ctrl+Shift+I in Windows, or Command+Shift+I in Mac)
  • Navigate to the Network tab
  • Ensure that the red recording button in the top left is on
  • Navigate to preview mode in your application and refresh the page
  • When the page is done loading, click through all relevant steps in your app.
  • Press the download button on the Network header