Clicking label does not activate text input

I am using ruby on rails with Materialize Gem I am working on signup/sign-in form in Model The problem is with password text field .when clicked on password label active class is not added but work fine with other input fields can’t see any issue in java-script . Inputs do not activate when clicking the label. You need to click below the label to active.

Rendered Html Output

`<form class="new_user" id="new_user" action="/signup" accept-charset="UTF-8" method="post">

<div class="row"> <div class="col s12 center-align"> wc <label for="user_gender_male">Male</label> <label for="user_gender_female">Female</label> </div> </div> <div class="row"> <div class="input-field col s12 m6"> account_circle <label for="user_user_name">Name</label> </div> <div class="input-field col s12 m6"> date_range <label for="user_dob">Birthday</label> </div> </div> <div class="row"> <div class="input-field col s12 m6"> lock_outline <label for="user_password">Password</label> </div> <div class="input-field col s12 m6"> lock_outline <label for="user_password_confirmation">Password confirmation</label> </div> </div> <div class="row"> <div class="input-field col s12 m6"> assignment_ind <label for="user_email">Email</label> </div> <div class="input-field col s12 m6"> phone <label for="user_phone_number">Phone number</label> </div> </div> <div class="row"> <div class="col s12"> </div> </div> </form>`

Any Help Will be Welcomed.

[kmmbvnr]

You have wrong id in the <label for=" attribute.

<input id="user_password2" ...
<label for="user_password" ...

Check the:

https://codepen.io/kmmbvnr/pen/dObyzM?editors=1000#0

Labels works fine.

[jessenieminen]

I’ve had the same problem but was able to monkeypatch that quite easily with the help of css pointer-events.

Just adding the following piece of less code did the trick for me. If you’re not using less, the actual code will of course differ for you but the basic principle stays the same.

/* Clicking the label does not activate the input without this */
input[type="text"] + label {
    pointer-events: none;

    * {
        pointer-events: all;
    }
}

Having said that, I think this should definitely be fixed directly to Materialize.