Date/Time Picker Popup Focus

I have a popup form that includes a basic date/time picker. When the popup opens the picker is automatically focused, triggering the calendar dropdown.

Depending on the users permissions, some of the inputs are locked/hidden. With this in mind, rather than focus on any one input, is it possible to not focus on anything when the popup opens?

I had a similar issue, and couldn’t find a way to prevent the auto-focus, so I used the following workaround: I disabled the input (date/time picker in your case) by default, and only enabled the input after a one-second pause in the workflow (make sure to check “hide the status bar as the pause occurs”). Not very elegant but it works and doesn’t impact the user experience.

1 Like

Wow, thanks so much!

Sorry for the silly question, but what action do you have in your workflow to re-enable the picker? Or is it some kind of conditional logic?

One other complication that I’m noticing is that the same form is used for Create and Update. When it’s used for Update and the field has an initial value, the picker drops down on open even when it’s disabled. You have to click out side of the calendar to close it, and then you can’t open it back up.

Sorry, it seems that the calendar input doesn’t behave like the other inputs, so what I said before doesn’t work for calendars, unfortunately. I use this method for other types of inputs and it works just fine (it involves a state and conditional logic, yes)…

This being said, I could put together a quick and dirty solution here: Bubble Application

Testing%20Environment%20-%20Edited

If you’re happy with the user experience it provides, you can look under the hood here: testingenvironment | Bubble Editor

It is more of a visual trick than a real technical solution, so there might be a more elegant way to go about this (maybe involving code?)… but in the meantime, it does the job :wink:

1 Like

That’s awesome. Super elegant solution to some other UX challenges I’m facing as well.

Thanks @Lucien!

This topic was automatically closed after 70 days. New replies are no longer allowed.