Cannot type (or even focus) in input type="text" while bootstrap modal is open

Question

I have a jquery code that creates a dropdown menu and places it exactly where the user right-clicked. Everything works fine except one thing: I cannot type inside an input field.

The generated dropdown looks as follows:

<ul role="menu" style="display: none; position: absolute; left: 751px; top: 294px; z-index: 999999;">
    <li><a href="#">Link 1</a></li>
    <li role="separator" class="divider"></li>
    <li><input type="text" name="filter"></li>
    <li style="height:200px;" class="scroll-container-y">
        <ul class="list-unstyled gutter-left-small">
            <li><a href="#">Sublink 1</a></li>
            <li><a href="#">Sublink 2</a></li>
            <li><a href="#">Sublink 3</a></li>
        </ul>
    </li>
</ul>

In my idea, the input will be used to filter the Sublinks.

What I've tried (with no results):

• Change z-index
• Force $('input').focus()
• Force $('input').get(0).focus()
• Playing around with CSS to check if it was just white text over white background
• Reviewed code to see if some other jQuery was interfering

Hope you guys can help.

EDIT (working example): It appears that this is a Bootstrap problem: as you can see from this fiddle http://jsfiddle.net/2gkjb0h8/3/ the input can be entered UNTIL the bootstrap modal is opened. Still no clue on how to solve this.

EDIT 2: Here's an image of what I want to achieve http://prnt.sc/bxbucf In the modal, there will be a table with selectable TDs; once selected, the user can right click to open a context menu with a list of teachers (each of them is a link). This works already, the input is there to allow filtering all the possible names.

Answer 1

It appears that this answer would resolve your problem.

Twitter Bootstrap modal blocks text input field

The author recommends against a modal for this scenario (and I agree).

It sounds like a modal isn't the right solution to your problem here.

A modal dialog by definition shouldn't allow the user to interact with anything below it.

However, he does provide a workaround:

Bootstrap 2

$('#myModal1').on('shown', function() {
    $(document).off('focusin.modal');
});

You can see this in action on an updated jsfiddle of your original solution:

http://jsfiddle.net/2gkjb0h8/4/

Bootstrap 3

It should also be noted that the event names changed in Bootstrap 3:

$('#myModal1').on('shown.bs.modal', function() {
    $(document).off('focusin.modal');
});

Answer 2

<div id="myModal1" class="modal hide" tabindex="-1" role="dialog">

tabindex is used to define whether elements should be focusable or not within a page. You have used tabindex attribute so that focus is on modal and you can't able to enter text on text box. Just remove tabindex you can able to enter text.

<div id="myModal1" class="modal hide" role="dialog">

Click here to check on jsfiddle

Answer 3

Not sure if the element is in DOM when you are trying to focus on it.

You can call this once this component is visible after right click. Also use assign an id to this input element.

$('body').find('#idOfInput').focus();

Answer 4

You can try usind data-target to focus the input

.btn-group {
    z-index: 1051;
}

ul[role="menu"]{
  position: absolute; 
  left: 50px; 
  top: 400px;
  z-index: 999999;
  border: 1px solid black;
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>   
<div class="container">

        <h3>Inputting proble</h3>

        <!-- Button to trigger modal -->
        <div>
            <a href="#myModal1" role="button" class="btn" data-toggle="modal" data-target="#text"  class="test" >Launch Modal</a>
            <p>
            Now you are able to enter text in the input field below. Once tested, open the modal.
            </p>
        </div>

        <!-- Modal -->
        <div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3>Modal</h3>
            </div>
            <div class="modal-body">
              <p>Now you will not be able to enter text in the input</p>
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>
        </div>
    </div>
    
    <ul role="menu">
    <li><a href="#">Link 1</a></li>
    <li role="separator" class="divider"></li>
    <li><input id="text" type="text" name="filter"  ></li>
    <li style="height:200px;" class="scroll-container-y">
        <ul class="list-unstyled gutter-left-small">
            <li><a href="#">Sublink 1</a></li>
            <li><a href="#">Sublink 2</a></li>
            <li><a href="#">Sublink 3</a></li>
        </ul>
    </li>
</ul>

<style>