0

Here's an extremely simple page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"
          rel="stylesheet">
    <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
    <input type="text" value="foo"/>
    <button type="button" class="btn btn-default"
            data-toggle="modal" data-target="#dlg">open</button>
    <div id="dlg" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <input type="text"/>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary"
                            data-dismiss="modal">OK</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

I would expect the dialog to really behave as modal, that is, to disallow tabbing to the first input field while open. Additionally, the input field inside the dialog should be focused on open.

This does not happen. The focus is somewhere else on open (probably the open button), and I can tab across all the controls.

Diego Mijelshon
  • 52,548
  • 16
  • 116
  • 154

2 Answers2

1

When a modal is shown, Bootstrap by default focuses the entire modal (for accessibility reasons), not anything within it specifically, because not everyone may want things within their modal to get automatically focused. Some folks use "modals" for stuff that isn't strictly a dialog (e.g. to show a map or video.)
But see https://github.com/twbs/bootstrap/issues/12525

You can focus stuff within your modal when the modal is shown by using some JS to listen for the shown.bs.modal event and then performing the focusing within your event handler function. For example:

$('#your-modal').on('shown.bs.modal', function () {
  $('#your-input').focus();
});

Not really sure how to go about the "don't let the user tab to stuff outside of the modal" part of your question. The approach used by jQuery UI doesn't seem too elegant, but it is one option: How does jQuery UI Dialog disable focus on background inputs?

Community
  • 1
  • 1
cvrebert
  • 9,075
  • 2
  • 38
  • 49
0

This was as easy as adding tabindex="-1" to my dialogs.

Diego Mijelshon
  • 52,548
  • 16
  • 116
  • 154