Set focus on modal input when visible

I used the modal tutorial (which was fantastic @Serhii_Karavashkin) - How To Create A Modal In UI Builder | Backendless - and then added text, an input, and a toggle. This is the layout -

image

When the modal opens, I want to set focus on the input. The modal visibility is controlled in the class list logic, so I added a Focus On Component block and get the component by Id.

This is how the modal opens (I haven’t figured out how to center the text, input, and toggle yet) -

The input does not have focus. Is there something else I need to do? Is there an issue with setting focus, and the modal is not visible yet?

I think setting the focus in the Class List Logic handler is too soon as the modal is not visible at that point. I’d use the Visibility Logic for that.

Regards,
Mark

Hey @mark-piller

Do you mind explaining what you’re thinking? I don’t see how putting the focus on component in the visibility logic block solves the modal not being visible. Doesn’t the visibility block control the visibility, not when it becomes visible?

Thanks,
Tim

Is the problem with the visibility or setting the focus?

If the latter, the focus cannot be set unless the component is visible. The class list logic handler has logic to make it visible. This means the focus setting logic must be somewhere where you know it runs after the component became visible.

Hi @mark-piller,

I hope you and the entire backendless team had a happy holiday! The issue is setting focus. Would you be able to suggest where to place the set focus code? I’m unsure how I would know when the component has become visible.

Thanks,
Tim

Hello @Tim_Jones!

You can add autofocus in the settings of the Input component:

Regards,
Alexander

I have that checked and it’s not working.

Could you provide your appID and tell me which page this logic is on?

Regards,
Alexander

Hi @Alexander_Pavelko

appID: EEE25B20-17FA-97DD-FF29-EC45A5072A00
page: shipppingMain
Input: Page > modalScan > modalScan_card > modalScanInput

To make the autofocus set in the component settings work, you need to use Visibility Logic, as Mark wrote above.
Or you can add a small delay before the focus is set:

Regards,
Alexander

Hi @Alexander_Pavelko

I got the focus to set on click by adding the delay as you suggested. Thanks for that; however, I want to be able to open the modal and set the focus whenever the corresponding page data value changes. As it is opened more than one way.

Can you provide an example of how to use Visibility Logic? I tried a few things and had no luck.

Thanks!

Hi @Tim_Jones!

You can use this block to switch the visibility of a component:

Or you can do it this way using PageData.
First, set the Visibility Logic property for the modal window:

And then add an On Click Event handler for the button:

Regards,
Alexander

Hi @Alexander_Pavelko,

I’m not having trouble with visibility; I’m having trouble with setting the focus. I used the modal tutorial (How To Create A Modal In UI Builder | Backendless) and can get the modal with the input to appear and disappear just fine. I need the input on the modal to grab focus when the modal is made visible.

Tim

Hi @Tim_Jones!

If you change the way the modal window opens using the method suggested above, you will have autofocus (which you set in the settings).

But if you want to leave it as it is, you can use the Focus On block.

Or are you facing some other problem?

Regards,
Alexander

That was very helpful; thanks! I set the Visibility Logic to -

With that in place, do I still need the Class List Logic?

Tim

Good job, that should be enough. You can easily check this without removing the logic with classes, just disable it this way:

Regards,
Alexander

Yes, of course. Thank you again!

Tim

1 Like