Hi, The problem is with an id with repeats in both login and register form. A value of id attribute should be unique in all page, changing that and value in label for attribute, should fix this, but sometimes it buggy even with unique id, wich can with this little jquery script:

$('label').on('click', function() {
    var label = $(this);
    var input = label.siblings('input')[0];

    label.addClass('active');
    input.focus();        
}); 

Regards

---

Hi, I'm having the same issue on a Login/Register modal with the base code taken from your site example. The username and password fields on the Login tab work correctly when clicking on the text, however in the Register tab, only the email field works as expected, username, password and password2 do not work when clicking on the text, only when clicked in a blank space around it. I've checked this issue in the latest Chrome, Firefox and Safari and all of them show the same issue. Here is the modal code:

<!--Modal: Login / Register Form-->
<div class="modal fade" id="modalLRForm" tabindex="-1" role="dialog" aria-labelledby="Login Register Modal"
     aria-hidden="true">
    <div class="modal-dialog cascading-modal" role="document">
        <!--Content-->
        <div class="modal-content">
            <!--Modal cascading tabs-->
            <div class="modal-c-tabs">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs tabs-2 orange darken-3" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#loginpanel" role="tab"><i
                                class="fa fa-user mr-1"></i> Login</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#registerpanel" role="tab"><i
                                class="fa fa-user-plus mr-1"></i> Register</a>
                    </li>
                    <button type="button" class="close waves-effect waves-light" data-dismiss="modal"
                            aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                </ul>
                <!-- Tab panels -->
                <div class="tab-content">
                    <!--Login Panel-->
                    <div class="tab-pane fade in show active" id="loginpanel" role="tabpanel">
                        <!--Body-->
                        <div class="modal-body mb-1">
                            <form method="post" action="/users/login">
                                <div class="md-form form-sm">
                                    <i class="fa fa-envelope prefix"></i>
                                    <input type="text" id="username" name="username" class="form-control validate"
                                           required>
                                    <label for="username" class="">User Name</label>
                                </div>

                                <div class="md-form form-sm">
                                    <i class="fa fa-lock prefix"></i>
                                    <input type="password" id="password" name="password" class="form-control" required>
                                    <label for="password" class="">Password</label>
                                </div>
                                <div class="text-center mt-2">
                                    <button type="submit" id="submit" name="submit"
                                            class="btn btn-rounded btn-outline-orange waves-effect">Login <i
                                            class="fa fa-sign-in ml-1"></i></button>
                                    <hr>
                                    <div class="row">
                                        <div class="col-md-6">Forgot <a href="/users/forgotusername">User Name?</a>
                                        </div>
                                        <div class="col-md-6">Forgot <a href="/users/forgotpassword">Password?</a></div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <!--/.Login Panel-->

                    <!--Register Panel-->
                    <div class="tab-pane fade" id="registerpanel" role="tabpanel">
                        <!--Body-->
                        <div class="modal-body">
                            <form method="post" action="/users/register">
                                <div class="md-form form-sm">
                                    <i class="fa fa-user prefix"></i>
                                    <input type="text" id="username" name="username" class="form-control validate"
                                           required
                                           minlength="5" maxlength="15">
                                    <label for="username" class="">Enter a User Name</label>
                                </div>

                                <div class="md-form form-sm">
                                    <i class="fa fa-envelope prefix"></i>
                                    <input type="email" id="email" name="email" class="form-control validate" required>
                                    <label for="email" class="">Enter Your Email</label>
                                </div>

                                <div class="md-form form-sm">
                                    <i class="fa fa-unlock-alt prefix"></i>
                                    <input title="Password must contain at least 8 characters comprised of UpperCase, LowerCase, Numbers/Special Characters"
                                           type="password" id="password" name="password" class="form-control validate"
                                           required
                                           pattern="(?=^.{8,}$)((?=.*d)|(?=.*W+))(?![.n])(?=.*[A-Z])(?=.*[a-z]).*$"
                                           onchange="this.setCustomValidity(this.validity.patternMismatch ? this.title : ''); if(this.checkValidity()) form.password2.pattern = this.value">
                                    <label for="password" class="">Pick a Password</label>
                                </div>

                                <div class="md-form form-sm">
                                    <!-- TODO - Validate passwords match, if the do, then change the lock icon to fa-lock -->
                                    <i class="fa fa-unlock-alt prefix"></i>
                                    <input title="Please enter the same Password as above" type="password"
                                           id="password2" name="password2"
                                           class="form-control validate" required
                                           pattern="(?=^.{8,}$)((?=.*d)|(?=.*W+))(?![.n])(?=.*[A-Z])(?=.*[a-z]).*$"
                                           onchange="this.setCustomValidity(this.validity.patternMismatch ? this.title : '')">
                                    <label for=" password2" class="">Repeat Password</label>
                                </div>

                                <div class="text-center form-sm mt-2">
                                    <button type="submit" id="submit" name="submit"
                                            class="btn btn-rounded btn-outline-orange waves-effect">Sign up <i
                                            class="fa fa-sign-in ml-1"></i></button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <!--/.Register Panel-->
                </div>
            </div>
        </div>
        <!--/.Content-->
    </div>
</div>
<!--Modal: Login / Register Form-->

---

Hi, cdenby, can you show some source code there, or on my mail r.rogulski@mdbootstrap.com?? It will be easier to find and fix. Regards

---

I noticed the same issue - it happens "randomly" to labels in some of my text (and email) fields and not others in the same form - I haven't worked out why yet either!

---

I'm thinking this is because it's in a modal. Here's a bigger picture: I load the small modal html from the server with ajax. I append that html to the bottom of a panel. I call the modal() method on the new node in the DOM. The end result is that I think I have two of all of the controls on that Modal. One set is where I appended it and one set is the modal location. Is there a way to call a modal with MDBootstrap similar to jquery-ui dialogs? `$("<div title='My Dialog Title'>My dialog content</div>").dialog();

---