Bulma: Icon in input field not clickable

[umangm99]

Code for problem statement

<div className="field"> <div className="control has-icons-right"> <input className="input" type="password" placeholder="Confirm Password" id="confirm_password" autoComplete="on" value={this.state.confirm_password} onChange={this.handleChange} /> <span className="control icon is-small is-right"> <FontAwesomeIcon icon={["fas", "eye"]} onClick={this.unmaskPassword} /> </span> </div> </div>

Issue: Not able to click icon.

[jgthms]

This doesn’t seem to be Bulma related.

[umangm99]

Hi Jeremy,

<div class="field">
  <p class="control has-icons-left">
    <input class="input" type="password" placeholder="Password">
    <span class="icon is-small is-left">
      <i class="fas fa-lock"></i>
    </span>
  </p>
</div>

Above code is part of basic documentation and even in this icon inside input text box is not clickable.

My use case is to to make password show and hide on click of icon.

[patrickblackjr]

I think this is an issue for something like StackOverflow, as this isn't related to Bulma directly. Bulma is a framework, not a complete UI kit. So you'd have to implement something of that nature yourself via jQuery or something else.

[jgthms]

The .icon class has pointer-events: none. You can make it clickable again by adding pointer-events: initial.

[SaymV]

.control .icon {
    pointer-events: initial;
}

For the copy pasters finding this in 2020.

[koiki13]

@umangm99 Give the icon a class name say "fav-icon", then add this to css
.fav-icon{ pointer-events: all; cursor:pointer }.

pointer-events should be set to all not initial