Modal Frame Rendering Instability When Using Multi-Select Component

Screenshare-2024-01-301_17_04PM-ezgif.com-video-to-gif-converter

Hi Retool team,

I wanted to bring to your attention an issue with the Modal Frame rendering that we've encountered. It seems to exhibit instability when selecting multiple names in a multi-select within a form. This problem has been reproducible in a significant number of cases.

Issue Description:

The Modal Frame experiences erratic behavior when specific combinations of names are selected. This has a noticeable impact on user interaction and the overall functionality of the application.

Steps to Recreate:

  1. Import the provided app JSON Modal Frame instability demo (from Timesheets).json
  2. Open in edit mode
  3. Select the following names: "Cebisa Poleman", "foreman test test", "Duane Zintle", "Bongani Webb", "Ashley Overtime".
  4. Observe the erratic behavior.

Note: This issue seems contingent on specific name combinations and lengths.

This specific demo app seems to not showcase the issue reliably on a Public link (unfortunately, although earlier versions of the app consistently show this behaviour on user mode).

Current Workarounds:

I've temporarily resolved this by repurposing the Body as the Header, and the Footer as the body, which stabilizes the frame. Attempts like using a tabbed container didn't address the issue. Removing some components, like the site selector, does fix it, but it's not a viable solution.

Additional Resources:

Here are videos demonstrating the issue from a user and myself.

Has anyone else experienced this? Any insights or suggestions on this would be greatly appreciated. Looking forward to a potential fix or guidance on this matter.

Thanks!

Credit to ChatGPT, my trusty editor.

Hello @Kabirdas & @victoria,

Just checking in to see if there are any updates on this? :see_no_evil:

Hey @tristdrum Thank you for such a thorough report here!

I've followed your steps and am not seeing the same issue on my end. I do see the modal frame resize when the name is added or removed, but the transition is clean for me.

Are you still seeing this behavior on Cloud or a specific self-hosted version? If so, are you able to share what OS and browser you're using?

Hey @everett_smith !

It is solved, thank you!

(must've been fixed within the 6 weeks at some point)

Thanks for confirming @tristdrum!