Custom Component not displayed in preview until browser window resizes

  • Goal: Trying to build a custom component.

  • Steps:

  1. Use the provided template (GitHub - tryretool/custom-component-collection-template) to build a very simple custom component which i've added to a very simple app. 2

  2. Clicking the "play" button the component does not show up until I resize the window.

  • Details:

The git repo for the custom component is this one:

Even though there isn't any change from you template.

  • Screenshots:

In edit mode:

In preview mode prior to resizing:

In preview mode after resizing:

  • App json export:

Attached.

custom component library sandbox.json (4.5 KB)

Thanks for reporting, @gtourkas! :clap:

I am able to reproduce this behavior, albeit a little inconsistently, and will talk to our internal teams about further diagnosing and fixing the issue.

@Darren

Thank you for your prompt reply.

May I ask, if there are there any updates on the matter ?

Looking forward to your response.

Hey @gtourkas - this is a fairly high priority issue for the team, as we are currently putting an emphasis on supporting custom components. It has been difficult to consistently reproduce this particular issue, however, so I can't confidently give a timeline. As soon as I have an update, though, I'll follow up here!

1 Like

The fix for this should be live with version 3.83, @gtourkas! Let me know if you continue to see any odd behavior and I'll be sure to follow up. :+1:

Hello Daren,

Thank you for your email.

Still happens here with 3.83. On first page load the textboxes show. On page refresh they don't. On window resize the textboxes show up.

You can view a screencast here:

Hii @gtourkas,
I wasn't sure, but resolved the issue by turning off WidgetGrid. It seems to be related to the new features.

@ZeroCodez

Even if you disable WidgetGrid, when the user refreshes the page, the textboxes do not show up.

Hey @gtourkas - sorry to hear that you're still having issues. Thanks for including a screen capture, though!

Which parts of the app are being rendered by the custom component? Just the inputs? Or the text, as well? Also, do you see any errors in the browser console when the custom component isn't showing up?

Last but not least, is this a consistent issue or does it only happen intermittently? Even when I reproduced the behavior initially, it seemed to happen very inconsistently.

@Darren

Yes, the textboxes are rendered by the custom component.

Yes, it is consistent. First load shows the textboxes with a minor delay. Browser refresh doesn't show the textboxes until browser resize.

This is the JS error that occurs but it doesn't seem pertinent

It occurs also on the custom component that simply prints a "Hello !", which is what a submitted as problem in the first case.

Inspecting with the Developer Tools, the IFrame that is supposed to be used for loading the custom component doesn't show up. The "fetching mask" div does:

After resizing:

Hope these shed some light.

Thanks for sharing this! I'll get back to you as soon as possible. Appreciate your patience. :raised_hands:

1 Like

Hey @gtourkas - our engineers are pretty confident now that they've narrowed down the scope of the issue and shipped a fix. Can you verify on your end?

1 Like

Hello @Darren

Yes, I can verify that that the issue has been resolved.

Many thanks to you and your engineers for this.

1 Like

Awesome - glad to hear it!