I have a Popup for each Project object type in my app, which is meant to show a photo gallery, with the photos at the top. At the bottom of the Popup is an Input field for adding comments.
When I open a Project Popup I expect the Popup to stay at the top, so I can see the photos, however on both Desktop and Mobile, the Pop-up initially open at the top, then immediately scrolls down to the Input, which seems to be focussed.
Is there some way to force the Pop-up to stay at the top?
Problem is I have to run the Workflow on the Resuable Element itself, which is in the Popup, so I can’t refer the Popup opening itself as the trigger, as I can’t reference it from the Reusable element.
So I found this 'Do When CustomDefinition is Visible" and set it to run every time. I thought it had done the trick, but somehow the first few times I open a Popup it will now Scroll to the Featured Image, but after maybe the 3rd click, it starts scrolling again to the Input (which is Focussed).
OK, this is a bit bonkers, but on Desktop I can solve the issue but putting a 1x1 pixel Multiline Input underneath the Featured Image that I actually want to see. Then my Feature image is always in focus because it is Scrolled too, either because of the Workflow, or because the desktop will scroll to the Input.
It breaks the layout on mobile though, so isn’t a solution.
At what point is something considered a Bubble bug?
@major_groove I just experienced this issue with a popup and a comments section in the popup. I fixed it by adding a 1x1 input at the top of the popup and setting focus to that input in the workflow that opens the popup
I was able to figure out another workaround. I made the input field hidden on page load and then in my workflow to show popup I inserted Add a pause before next action of 500ms then put a show element action in the workflow to show the input element. I tried shorter than 500ms but 500ms seems to be the trick. This makes it so the keyboard doesn’t open and it shows the entirety of the popup as if there were no input element. There is one more step that you have to add to keep this fluid. You have to add a workflow that re-hides the element when you complete, close or exit out of your popup so the input element is hidden again for the next time you open the popup. This has been working for me so far. Hope it helps.
Found an even easier solution for this…
If you want the focus of a popup to be anywhere, simply place a 1px x 1px DROPDOWN and then use the “Set Focus” workflow to this hidden dropdown.
The big difference with using the dropdown is it does not trigger the phones to display their keyboards.
Hope this helps.