Custom Component Gets Duplicated

App Building
1

  • Goal: use a custom component

  • Steps: just seems random, ocasionally the custom component is duplicated in the DOM.

  • Details: I have observed this in multiple apps, in different types of containers. Refreshing the app fixes it usually.

  • Screenshots:
    Retool is rendering TWO of this custom component
    DOM:

    image
    image654×850 111 KB

    Display (clearly they overlap)
    image
    image582×502 23.6 KB

    In the app, there is only one:
    image
    image646×802 34.6 KB

  • App json export (module)
    Object Builder.json (935.8 KB)

1 Like
2

this is especially problematic because only the first one gets the proper inputs, but the 2nd one appears on top in the z-order, so the one with the correct data inputs is not the one we see or can click on.

1 Like
3

additional context:

  • Custom Control is in a container whose visibility state can change.
  • Inputs to the control also change based on user selections
  • Generally appears right away, although the app goes through several rendering phases as data is loaded. It is likely initially hidden and having default inputs, which is the "BrowserStack" image (2nd entry), and then when the data is retrieved from a query and the table populated, the container is made visible and the inputs to custom control change.

Possibly some timing aspect of this sequence causes a duplicate custom control. It seems like a disconnect between the DOM and shadow DOM but I've never seen that issue in a react app before.

1 Like
4

Hello @Garr_Godfrey,

Apologies for this issue, and thank you for the great write up and documentation on this :raised_hands:

It is always tricky to pin down issues that occur at random, I can play around with your app from the JSON export and see if I can get the behavior to occur for me.

I think you might be right with the DOM and shadow DOM becoming out of sync/disconnected. I am going to show this bug to my team as I have not seen it before and see if anyone has seen this before or has actionable steps on what we can do to reduce or eliminate this from happening.

Maybe there is some kind of race condition going on where the app hasn't realized that the custom component is already being built and thinks it needs to build it again :thinking: