When mousing down over radio components sometimes a hidden component below is selected rather than the unhidden radio button on top which prevents it being clicked. Gif below to show the issue (Its in editor mode to show the hidden component below it is being hovered, but this happens live as well). The issue doesnt happen if the hidden component is shortened so that it doesnt overlap with the radio buttons, so this is definitely the issue. Also you will notice it doesnt happen when the mouse is going upwards on the page, only downwards. If it was the other way round I might not have even noticed...
Yes you are correct it looks like the app editor is trying to guess what you want to click on, and thinks you want to click on the hidden component instead of the radio button component
Have you tested the behavior with a deployed app? I did some testing and when the components are crammed together in 'editor' mode it sometimes does not register my clicks, but on the 'live' deployed app, the hidden component is not selectable and does not interfere with the radio button.
Let me know if this is an issue for while not in the editor mode, you may just need a little more space between the radio and the hidden components.
As you said going bottom to top works fine, maybe going wide with the mouse 'around' the hidden component also works, or you could make the hidden component less wide.
Seems to just be how the mouse is getting picked up by the canvas components.
@WidleStudioLLP@Jack_T Thank you both for looking at this. Unfortunately I can confirm that this is an issue also in the deployed app both on Chromium browsers and Safari, and both desktop and mobile view. Its very odd as I use hidden components a lot and have never encountered this sort of behaviour before. I thought the editor would only let you select hidden components via the title tab or component tree.
Ah ok apologies for that issue, I was hoping it wouldn't be for deployed apps but I can definitely look to reproduce this and file a bug report.
Does it affect any other components that use select via click or only the radio button component and when the hidden components are both above and below the radio component?
It seems that when the non-hidden components are right up against each other, the mouse does not register the hidden component. And when they are spaced out, it picks it up but is able to 'un-select' it to properly reset before getting to the second radio button
Are you self hosting an older version of retool by chance?
Hey @Jack_T thank you for your efforts! We are not on the self hosted version. Turns out it is a very specific bug to reproduce. After a lot of faffing about here are the settings I figured out needed to reproduce the bug:
Radio group with two options, full screen width, left position label, 12px 8px margin
Text input, full screen width, 12px 8px margin, hidden, and directly below the above radio button
Copy paste this structure a few times
Turns out the margin is essential to reproducing, as the default margin had no issues. Very bizarre. Hope that helps!
