XF 2.0 Stop autofocus on overlay forms?

[Jaxel]

When using data-xf-click="overlay", the resulting window automatically focuses on the first element in the form.

In my specific case, that first element is the datepicker. When the datepicker is focused, it opens up a large popup box for the calendar selector.

This of course means when my overlay form opens up, it also pops open the calendar selector. How can I disable this?

 

[AndyB]

Do you have any hidden inputs you can focus on instead?

 

[Jaxel]

Do you have any hidden inputs you can focus on instead?

Nope.

 

[CyberAP]

Try this:

$(document).on('overlay:shown', '.overlay', function(event){
    $(this).find('input, textarea').blur();
});

Also make sure none of the keyboard input elements have autofocus attribute.

If you need to know how exactly XenForo handles autofocus take a look at core.js:2613, autoFocusWithin function. It's triggered by show method in XF.Overlay (core.js:4798).

Alternatively you can set focusShow option to false so it'll never trigger autofocus. But I don't know yet how you can pass this option to overlay's __construct from your trigger attributes.

 

[Jaxel]

Try this:

$('.overlay').on('overlay:shown', function(event){
    $(this).find('input, textarea').blur();
});

Also make sure none of the keyboard input elements have autofocus attribute.

If you need to know how exactly XenForo handles autofocus take a look at core.js:2613, autoFocusWithin function. It's triggered by show method in XF.Overlay (core.js:4798).

Didn't work.

 

[CyberAP]

You probably need to set data-focus-show="false" on your overlay container or something similar to that.
There's also a data-no-auto-focus="true" that you can try on forms.

 

[Jaxel]

data-no-auto-focus="true" worked! thanks!

 

[CyberAP]

Updated first code example with delegation, that might be the reason it didn't work in the first place.

 

[AndyB]

This worked for me.

autofocus="false"