Dropdown/Select Component folded out invisibly

We are a little slower to update versions because we customize our interface with Custom CSS and have to make adjustments ourselves with each update :sweat_smile: When we update again soon I will keep you up to date.

We're also seeing this in our apps (we're on the cloud version). I hope this bug is being prioritized as it is an app-breaking bug and makes many components (dropdowns with search enabled, datepickers) pretty much unusable...

1 Like

Hi all, I believe I have a workaround (at least for datepickers).

I can get the bug to occur every single time I use tab to navigate from my datepicker to a text input box. Here you can see an inspect of the element that isn't disappearing as it should (sorry it's not the full screenshot, company info :slight_smile:) :
image

To make this stop happening I added this event handler to my datepicker component (which is named dateTo):
image

I haven't tested this with dropdowns but hopefully this will help somebody else.

Hi again, are you all still looking into this? I still have this bug happen constantly on cloud and it's getting extremely old.

Hi,

It also appears this is the same problem I have been trouble shooting for some time. It is very intermittent. Has anyone found a solution or workaround for this issue?

1 Like

Hi, did you try my workaround above (with hiding and unhiding the component on blur)? It's working for me and it seems that the Retool team has no plans to fix this bug (it's been 1.5+ years at this point)

Unfortunately it looks like that solution isn't quite working for my case. I've been able to pin down exactly what users are doing that recreates it. Our use case is a dropdown template select, with variables that need filled in. When a user selects an item from the dropdown and then immediately clicks into another application (presumably to copy an item) and then clicks back into the ReTool window, this issue occurs 100% of the time. I am instructing users to click on the ReTool page again after making a selection, before moving off the page. It appears the permanent solution may have to be changing to List Box which wouldn't be ideal.

Hey folks, thanks for resurfacing this issue! We've had a significant amount of trouble reproducing the behavior on our end which is a big part of why it hasn't been addressed yet. I've bumped the issue again with the team.

@zpieratt37, since you're able to get a consistent repro would you mind sharing more screenshots of your configuration, perhaps alongside an app JSON?

Also thank you for posting your workaround here @dzear, curious to know if you're still able to reproduce the behavior using a date component or a date time component without your workaround.

Sure thing! Our setup is dropdown mapped via a MongoDB query, returning template results. These include variables which the user needs to fill out prior to submission. The way we caught it was users attempting to click into or paste details into these variables and the dropdown element is lingering over it.

I would be happy to share the app JSON if I can send you that individually!

image
image
image

1 Like

I am having this issue too. The steps to reproduce the issue for us is exactly the same as @zpieratt37 described. Within Windows OS, using a Chrome browser, click to open the dropdown list, with the dropdown list open start doing anything else in any other open OS window, as soon as the browser Window showing the Retool app is no longer in focus the drop down list disappears, and now click where the dropdown list would have been and you will be selecting an item within the now invisible dropdown list instead of clicking on the page element that is visible. This happens enough that I believe there may be other workflow that also create the problem. But the workflow described above creates the problem 100% of the time.

Our company would love to see this get fixed. Thanks!

Our app makes heavy use of multi-select dropdowns for a search filter. The bug is extra frustrating in the case of a multiselect dropdown because the hidden dropdown list does not go away after the first click. Only an off-click in a different area of the screen will get the invisible dropdown list to go away.

2 Likes

I'm struggling with this, and have been able to recreate it in the same way as described. If I have a dropdown open and click onto another window and then click back into the Retool window (not onto the dropdown) then it bugs locked open, so you can repeat this with every dropdown visible to bug them all open. I have a video. Has anyone found a hack? I've tried a js hack to mass blur all inputs on focusing another, but it doesn't solve it.

1 Like

I've used this CSS hack, it just gets the bugged dropdown out of the way so you aren't clicking the options without realising. It does mean the bugged select list needs to be clicked twice to open, but that's fine by me!

.C5YACX.unmounting {
z-index: -1 !important;
}

1 Like

Thank you -- your method to reproduce the issue worked for me @Joshua_Ellis !! We haven't been able to consistently reproduce it until now.

I have not tried the CSS hack workaround yet, but I'll report back here once I do.

@Joshua_Ellis , I added a modified version of the CSS hack you shared and I can no longer reproduce the issue.

div#RetoolSelectOverlayWrapper.unmounting {
    z-index: -1 !important;
}

I published the change to our app and let the users know, I'll keep you posted if we see it pop up again.

Thank you so much!!

1 Like

Great stuff! I'm glad it was useful, my staff haven't experienced the issue again since I last posted.

Thanks

1 Like

The fix should be shipped to Retool Cloud as of this week :blush:

4 Likes

Fab, thanks for keeping us in the loop

It looks like the issue still persists after the fix. Able to reproduce it with the same steps as above. Will be checking out the css fix, thanks for sharing that!
image

Thanks! :disappointed: our team is looking into it again