Is there any need for tabindex?

[Evandar276]

Hi,

is there any real need of this attr('tabindex', -1) at line 218? It works same for me.

It breaks http://imperavi.com/redactor/ popups (make them unclickable) when redactor is in mfp.

Thank you for reply

[juanghurtado]

Same issue here, but with edit popups on CKEditor. It's extremely weird, because I can click other form elements inside those popups (combo boxes…) but not text inputs.

Removing tabindex="-1" from mfp-wrap element fixes the issue.

[rodionme]

Same issue with Alertify plugin.

[dimsemenov]

The purpose of tabindex on mfp-wrap is quite simple - without it you can't focus modal properly and "tabbing" will be possible to elements outside of popup. It's explained quite good here http://www.nczonline.net/blog/2013/02/12/making-an-accessible-dialog-box/

Anyway, you may just reset it, for example in beforeOpen callback:

callbacks: {
    beforeOpen: function() {  this.wrap.removeAttr('tabindex') }
}

[hifall]

How does one remove tabindex for all instances globally?

[own3mall]

tabindex should be removed. There is absolutely no need for it anymore in 2019. Setting it causes many issues in Firefox. This one happened to me with jQuery UI datepicker select dropdown:

https://stackoverflow.com/questions/29887850/jquery-ui-datepicker-month-year-dropdown-is-not-working-in-popup-in-latest-firef

Removed tabindex, and everything works fine now. I wrote my own modal library too, and I don't use tabindex anywhere. This causes all sorts of strange behavior. It really needs to be removed.

It is true that tabbing through elements may not work as desired, but that is much better than running into strange issues with Firefox. Too bad tabbing isn't prevented by z-index...

[own3mall]

The problem appears to be in Firefox only as shown in this fiddle:

http://jsfiddle.net/betfoz8j/4/

Try changing the year in the jQuery UI datepicker in that fiddle using Firefox. It won't work because it can't focus on the select which is rendered outside of the tabindex="-1" element.

See this bug here where discussion is taking place regarding this problem:

https://bugzilla.mozilla.org/show_bug.cgi?id=1468410

[sonimanthan228]

The purpose of tabindex on mfp-wrap is quite simple - without it you can't focus modal properly and "tabbing" will be possible to elements outside of popup. It's explained quite good here http://www.nczonline.net/blog/2013/02/12/making-an-accessible-dialog-box/

Anyway, you may just reset it, for example in beforeOpen callback:

callbacks: {
    beforeOpen: function() {  this.wrap.removeAttr('tabindex') }
}

Thank you