[Reveal] 'Tab' key does not work for forms loaded via ajax in reveal modals

[sujayjaju]

How can we reproduce this bug?

1. Setup a reveal modal to load a form via ajax on 'open.zf.reveal'
2. Once open, click the first input in the form and then hit 'Tab'

What did you expect to happen?
Tab should have taken you to the next field in the form.

What happened instead?
Tab key does not work

Test case:
http://codepen.io/sujayjaju/pen/akAYzP

[samuelmc]

This is because foudation looks for focusable elements in the reveal when it opens, when the reveal is open the tab key is limited to those elements.

For now you can work around this by loading the ajax content into the reveal before opening it, here is an example: http://codepen.io/anon/pen/jAoKrW

[sujayjaju]

Thanks for explaining it. The issue with loading before displaying the modal is with the user experience. If the ajax content takes a bit to load, there is no feedback to the user ... so it feels like clicking the button does nothing.

Is there a way to reinit focusableElements?

[samuelmc]

Sadly there is no way, the method is private.
I'll create a pull request to fix for this issue later today.
Loading the content before opening the reveal is just a quick workaround.

[sujayjaju]

Can you review my commit sujayjaju@8d85760? Should I create a PR?
It basically added "data-ajax-url". When present content gets loaded form that URL on open.