Dropdown/Select Component folded out invisibly

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.

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;
}