support tabindex within the modal

[ryancwalsh]

What kind of issue is this? (put 'x' between the square brackets)

• [ ] Question. This issue tracker is not the place for questions. If you want to ask how to do something, or to understand why something isn't working the way you expect it to, use http://stackoverflow.com/questions/ask . Provide working code, starting from http://jsfiddle.net/JNsu6/15/. We monitor the tag featherlight.js.

• [x] Bug report. If you’ve found a bug, you must provide a minimal example in a CodePen, starting from http://jsfiddle.net/JNsu6/15/ .

• [ ] Feature Request. Make sure there's no good way to do what you want first; consider asking on http://stackoverflow.com/questions/ask first.

Please see http://stackoverflow.com/a/42235457/470749

My form (look at the demo fiddle here, and I've also pasted some code below) seems not to support tabindex inside the Featherlight modal.

I think it's because of this part of Featherlight here.

How can I display a form within a modal and still let a user press the TAB key to bounce to the next field?

[marcandre]

Just to confirm that it is a bug. I plan to address it at my earliest convenience. Saddly, it's not trivial to fix correctly.

[aprea]

I'm also experiencing this bug. Makes it very unpleasant to use forms inside featherlight modals.

[eyevandy]

Love featherlight except for this. I'm using @ryancwalsh's fix on SO but I could see it breaking upon update. I am guessing it's not trivial to fix because you still want to disable tabbing outside the modal? For me I'd be fine with a parameter that turns off this behavior completely which is essentially what ryan's fix does. Thanks ryan btw!

[lingtalfi]

+1 for @ryancwalsh fix on SO (same problem, same fix).

[ryancwalsh]

@lingtalfi and @eyevandy if you like https://stackoverflow.com/q/42234790/470749 and my answer on that page, they could use an upvote 😉 Glad it helped. I love SO.

[lingtalfi]

done :), and thanks for the help by the way, parsing the whole source code takes some time, and your answer just saves us that much time.

[EvanHerman]

I encountered this same issue while working on a project this morning. My solution was to just loop through each input field and set the tab index on the afterOpen callback.

$.featherlight( $( '.element' ), {
  afterOpen: function() {
    
    var count = 1;
    
    $( '.element > .featherlight-content' ).find( 'input, select, textarea, button.continue' ).each( function() {
      $( this ).attr( 'tabindex', count++ );
    } );
  
  },
} );

Seems to work well, for my needs anyway, while this bug is patched. Hopefully it might help others.

[dkjensen]

Any update on this?

[wolffereast]

I dropped an answer on the SO post that updates the .not selector to leave items in the modal alone. Its a different take then updating the tabindex after it is overridden. It's definitely not polished but it might help someone down the line.