$modal does not stop tabbing on the background

[chriswu14]

This can be reproduced on the sample page on http://angular-ui.github.io/bootstrap/

• in the Dialog section click 'Open Dialog' button
• keep hitting tab key

result: tab going through background page and data can also be entered.

Hope someone can advise on this problem. Thanks.

[pkozlowski-opensource]

Yeh, this is a valid point. We should fix this.

[chriswu14]

I can see the last Bootstrap version modal dialog was setting the tabindex = -1 to prevent this. But I tried it on the markup it does not fix it.

[hallister]

Well this is going to be a tough one. I played with it a bit today and here's what I've found:

The tab-index trick Bootstrap is using is quite dependent on careful layout of the page (in fact, all items that can be tabbed to on a page must also have a tab-index).

The only other way to fix this is to bind to the tab keypress event, determine if the event.target is a child of modal and event.preventDefault() if it's not. Unless there's a "better way", I'm not sure how this is fixed.

[jmwolfe]

👍 I would really like to see this one fixed soon! @hall5714 - i wonder if there is a way to wrap it around to the first element on the modal if the target isn't a child of the modal. having it halt on the Cancel button or whatever would be sub-optimal. How long to get this on the roadmap? Shall I have a go and submit a pull?

[robvdl]

They have a workaround for this problem in Bootbox (http://bootboxjs.com/#examples), which also uses Bootstrap dialogs, except they somehow managed to disable tabbing on the page behind the dialog. Can we maybe look how they got around this issue?

[robvdl]

I also did my own workaround for this problem, but by completely overriding the tab behaviour and taking over from the browser (manually moving focus between fields), and only when a dialog was open. I don't think this is a good solution however, and think it would be better to see how they got around this problem in Bootbox.js first.

[jmwolfe]

I think the fix is in bootstrap itself, as I don't see any tab handling code in bootbox.js.

I would fork this and work on a fix for this, but I'm having GIT difficulties. Seems I already forked master and made some changes for another defect that were submitted as a pull but weren't needed. Now when I fork master it just goes back to my old fork and it has junk that I don't want. I tried reverting changes, but I just don't know if my current source really reflects the bootstrap master. How can do a completely clean fork? Can I delete the old one? It's not jumping out at me.

[jmwolfe]

figured out how to delete my old repo and have reforked it. Will take a go at this issue.

[jmwolfe]

yup... bootstrap 3 has this to keep the focus in the modal:

  Modal.prototype.enforceFocus = function () {
    $(document)
      .off('focusin.bs.modal') // guard against infinite focus loop
      .on('focusin.bs.modal', $.proxy(function (e) {
        if (this.$element[0] !== e.target && !this.$element.has(e.target).length) {
          this.$element.focus()
        }
      }, this))
  }

unfortunately, this is using a lot of heavy jquery, like $.proxy to provide context, event namespacing, the .has() function. Let me see what I can do with @hall5714's suggestion above.

[jmwolfe]

I have a branch commit in my repo that implements a fix for this issue (jmwolfe@759cddb). I would appreciate feedback before bothering with a pull request. This uses the same basic approach that bootstrap 3's modals use (without bootstrap of course). I do assume you want to move your focus after the last item to the first INPUT or TEXTAREA tag. We can discuss that as needed.

[pkozlowski-opensource]

@jmwolfe left some comments in jmwolfe@759cddb

[jmwolfe]

I have incorporated Pawel's feedback in the most recent revision in my tab-fix branch, here: https://github.com/jmwolfe/bootstrap/compare/modal_bg_tab_disable. Hope we can get close and I can propose a PR.