Popup always scrolls to input field

major_groove · 2021-01-11T18:38:54.059Z

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?

Video of isssue here.

I would use Scroll To action, but since the Element I want to view is in a Reusuable Element, which is viewed in a Popup - I don’t seem to be able to reference it.

Jici · 2021-01-11T19:19:19.645Z

Do you have a process that “Focus on input” when popup open?
Did you try to add scroll to directly to popup (When popup open…)

major_groove · 2021-01-11T19:42:04.183Z

There is no Focus on Input.

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).

See video of this.

Screen Shot 2021-01-11 at 20.40.011428×1014 120 KB

Jici · 2021-01-11T19:49:58.958Z

Is the input a plugin?
The main issue I can see here is the “auto” focus on input.

major_groove · 2021-01-11T20:03:23.038Z

Nope - it’s a normal Multiline input. There is definitely no Focus being triggered either.

This seems to be a Bubble issue: Autofocus Input Do NOT Do

The solution in that thread is a visual hack (remove the focus styling) and would not help me.

It seems my Hack above - to Scroll to the Featured Image, works a few times, then Bubble takes over and starts scrolling back to the “focussed” Multiline Input.

major_groove · 2021-01-11T20:37:55.491Z

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 · 2021-01-12T21:27:17.034Z

I contacted Bubble support, and they confirmed this is expected behaviour.

The person who replied to me said they had put in a feature request to make this behaviour optional, but I can’t imagine my request will be anywhere near the top of the pile of work-to-do.

ethan.cohen · 2021-03-06T21:50:42.649Z

@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

major_groove · 2021-03-07T11:58:23.512Z

You are right - that is the only solution. Problem is you get left with this 1x1 focussed input which is visible. @Jici has a plugin that hides the focussed input though.

It’s still stupid default behaviour. Would be nice if Bubble just fixed it.

wesfrank · 2021-04-21T22:54:05.705Z

Just ran into this issue too - have no idea why a set-focus is the default behavior for a popup.

Running into problems on mobile because a set-focus opens up the keyboard and covers half screen.

Jici · 2021-04-21T23:10:20.363Z

@wesfrank
this is a known behavior and I don’t think Bubble plan to change that.

Autofocus Input Do NOT Do Bugs

I have an multiline input element in a popup. When that popup is displayed the multiline input is automatically getting focused. I do not have a workflow event set to do this, and do not see any workflow event to make it so the multiline input is not automatically focused, nor do I see any checkbox options on the multiline input element in the editor to mark it to not be automatically focused. [Auto Focus Input] Is this some new ‘feature’ they added? If so, it should be more complete and allo…

I’ve created something for @major_groove . Can you confirm that the solution is working for you?

Thanks

major_groove · 2021-04-23T04:46:47.291Z

Yup it is still working for me.

Ridiculous default behaviour. I’ve already mentioned it to Bubble. @eve just FYI again.

Jici · 2021-04-26T01:27:16.851Z

Now available:

[RELEASED / FREE] Unfocus / Blur input Showcase

Bubble will automatically focus the first input field in a popup. To avoid this, use this plugin. You need to set attribute ID to the first field focused by Bubble when you open popup. Add the Blur/Unfocus element on the page itself, not in popup. Use the ID Attribute into the Unfocus / Blur Input Action after the Show popup action. A delay may help to be sure input field is visible before the action run. Demo: https://sandboxjc.bubbleapps.io/unfocus Plugin page: Unfocus / Blur input Plugin | …

b.kenfield · 2021-08-31T22:51:25.323Z

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.

Capture21226×335 24.6 KB

Capture3695×272 10.5 KB

happyholz123 · 2022-01-25T01:53:08.017Z

I found a fix.
I put the input box inside of a Group and it stopped focussing when the popup opens.

twowheelsanddeals · 2023-05-17T18:03:19.267Z

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.