How to put the focus on a certain input field on a modal form using Bootstrap?

[GeVanCo]

I've put my first steps in Bootstrap in combination with Flask and all works well so far. I'm using Bootstrap version 4.6.2.

I have an app running with the following, simple layout:

When I click on the "Add New Wiring Connection" I have a modal form popping up like so:

Again, all is working fine.

However, if the modal window opens I would like to have the first input field (input field belonging to "Device name:") to automatically have the focus and its surrounding border blueish (standard border colour when having the focus).

It surprises me that Bootstrap, with such a huge and overwhelming amount of features and/or possibilities, doesn't have this at hand by default.

I read here that, because of HTML5, the autofocus attribute doesn't work and you have to use a JavaScript to aim for the same effect.

I tried this solution but it doesn't work. Most probably - if not surely - because of my still not huge experience with this framework.

Below is the code I have that creates the modal form:

                <!-- Modal Add Connection -->
                <div id="mymodal" class="modal fade" role="dialog">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title">Add Connection</h4>
                            </div>
                            <div class="modal-body">
                                <form action="{{url_for('main.insert')}}" method="POST">
                                    <div class="form-group">
                                        <label>Device name:</label>
                                        <input id="focusedInput" type="text" class="form-control" name="device" required="1" autofocus="autofocus">
                                    </div>
                                    <div class="form-group">
                                        <label>IEC name:</label>
                                        <input type="text" class="form-control" name="iec" required="1">
                                    </div>
                                    <div class="form-group">
                                        <label>Connnection:</label>
                                        <input type="text" class="form-control" name="connection" required="1">
                                    </div>
                                    <div class="form-group">
                                        <label>Location:</label>
                                        <input type="text" class="form-control" name="location" required="1">
                                    </div>

                                    <div class="form-group">
                                        <button class="btn btn-primary" type="submit">Add Connection</button>
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>

The item of interest is the <input HTML tag with the id focusedInput. This is representing the first input field of the modal form.

Also note that I've put autofocus="autofocus" in the input HTML element as a first try (but indeed, it's ignored by Bootstrap). I've tried with and without that autofocus attribute but it has no effect at all.

Later in the code (just before the closing </body> tag, I have the following JavaScript (just as given in the above mentioned link on the Bootstrap website):

    <script>
        var myLocalModal = document.getElementById('mymodal')
        var myFocusedInput = document.getElementById('focusedInput')

        $('#mymodal').on('shown.bs.modal', function() {
            console.log("Now put focus on first input field");
            $('#myFocusedInput').trigger('focus')
        })
    </script>

If I use the Chrome debugger (pressing F12) and put a breakpoint on the variables then I see the variables are getting the correct element assigned by the document.getElementById() call.

I've also put a breakpoint on the line that should set the focus: $('#myFocusedInput').trigger('focus').

When I open the modal form then that breakpoint is hit (I also see the log text on the Chrome debugger console). But the first input field itself is still not having the focus (the cursor is not put automatically in that input field nor is the border of the input field blueish).

Result: my first input field on the modal form is not getting the focus I want it to have and the cursor is not put automatically in that first input field so that the user can start typing right away without having to select that first input field first.

Can somebody point me to the problem in the code?

Best,

[julien-deramond]

Hello @GeVanCo
I tried the code you provided in this CodePen, and it works pretty well on Firefox and Chrome. The only thing I changed is that in your <script> you try to reach myFocusedInput, and it is actually focusedInput.

[GeVanCo]

Hi Julien,

My oh my! I think I mixed up Bootstrap 4 and Bootstrap 5 stuff here. You're absolutely correct. When following your guidelines all is working as I expect. Thanks very much for pointing this out.

And thanks also for letting me know CodePen. Never heard of it before but very useful!

Best,