Bootstrap modal dialog requires two clicks to get focus in textbox

Question

I'm displaying the div below using the Bootstrap modal() method. When it displays I have to click the textbox (id=txtQueriedByUserFilter) twice to get the cursor to stay in the textbox so I can type a search term.

How can I get the first click to set the focus? I've even tried using jQuery to set the focus and that doesn't work.

$('#roster-filter-modal').modal();

    <div class="modal fade hide" id="roster-filter-modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" style="padding: 0px;">
                    <h3 style="line-height: 20px;background: #333;padding: 10px;color: #fff;font-weight: normal;font-size: 15px;margin-bottom:0px;">
                        Roster Filter Options
                    </h3>
                </div>
                <div class="modal-body">
                    <div class="filter-form module module-open" style="margin-top: 0px; margin-bottom: 20px; margin-right: 0px;  padding: 10px; border: 0px;">
                        <table  style="">
                            <tbody>
                                <tr>
                                    <td style=""></td>
                                    <td style="font-family: 'LatoBold'; width: 18px; ">
                                        Queried By User<br/>
                                        <input type="text" id="txtQueriedByUserFilter"  /> 
                                    </td>

                                </tr>
                            </tbody>
                        </table>
                    </div>


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <a id="roster-filter-confirm" class="btn btn-primary" >Filter Roster</a>
                </div>
            </div>
        </div>
    </div>

Answer 1

我从顶部div中删除了此属性，从而解决了该问题。

tabindex="-1"

Answer 2

Maybe this can welp:

$(function(){
     $('.modal').find('input').first().focus();

});