Bootstrap modal won't focus no matter what I try

Issue

I have a button which pops up a modal, it does pop up & is functional. The form is in there how it should be, etc. Just one thing doesn't work which is that the modal just isn't focusing. I also tried doing it with JS which I found on another stackoverflow post but that didn't help me either.

The code

<div class="modal" id="joinModal" tabindex="-1" role="dialog" aria-labelledby="joinModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="joinModal">Inschrijven voor de Austronauten opleiding</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="../action/handler.php" method="post">
                    <div class="form-group">
                        <label for="fullName">Je volledige naam</label>
                        <input type="text" class="form-control" id="fullName" name="fullName" placeholder="Henk Smit" autofocus>
                    </div>
                    <div class="form-group">
                        <label for="email">Je email adres</label>
                        <input type="email" class="form-control" id="email" name="email" placeholder="naam@email.com">
                    </div>
                    <div class="form-group">
                        <label for="age">Wat is je leeftijd?</label>
                        <input type="number" class="form-control" id="age" name="age" placeholder="0"
                    </div>

                    <div class="form-group">
                        <label for="degree">Van welk niveau kom je?</label>
                        <select class="form-control" id="degree" name="degree">
                            <option>Mavo</option>
                            <option>Havo</option>
                            <option>VWO</option>
                        </select>
                    </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuleren</button>
                <button type="button" class="btn btn-primary">Inschrijven</button>
            </div>
            </form>
        </div>
    </div>
</div>

Shows up an unfocussed modal when it's called.

The button that triggers the modal

<button type="button" class="btn text-success bg-transparent" style="box-shadow: none;" data-toggle="modal" data-target="#joinModal" autofocus>Inschrijven</button>```

Solution

I guess you are looking for the shown.bs.modal event. More about this in the documentation.

So when that event fires for your modal, just target the first input and focus it.

There is no use in focussing a div. A focussed input generally is what a user wants.

$("#joinModal").on("shown.bs.modal", function(){
  $(this).find("input").first().focus()
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>



<button type="button"  class="btn text-success bg-transparent" style="box-shadow: none;" data-toggle="modal" onclick="focus()" data-target="#joinModal" autofocus>Inschrijven
</button>

<div class="modal" id="joinModal" tabindex="0" role="dialog" aria-labelledby="joinModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="joinModal">Inschrijven voor de Austronauten opleiding</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="../action/handler.php" method="post">
                    <div class="form-group">
                        <label for="fullName">Je volledige naam</label>
                        <input type="text" class="form-control" id="fullName" name="fullName" placeholder="Henk Smit"
                               autofocus>
                    </div>
                    <div class="form-group">
                        <label for="email">Je email adres</label>
                        <input type="email" class="form-control" id="email" name="email" placeholder="naam@email.com">
                    </div>
                    <div class="form-group">
                        <label for="age">Wat is je leeftijd?</label>
                        <input type="number" class="form-control" id="age" name="age" placeholder="0"
                    </div>

                    <div class="form-group">
                        <label for="degree">Van welk niveau kom je?</label>
                        <select class="form-control" id="degree" name="degree">
                            <option>Mavo</option>
                            <option>Havo</option>
                            <option>VWO</option>
                        </select>
                    </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuleren</button>
                <button type="button" class="btn btn-primary">Inschrijven</button>
            </div>
            </form>
        </div>
    </div>
</div>

Answered By - Louys Patrice Bessette