【Bulma】input内のiconをクリックさせる

TL;DR

Bulmaの.control .has-icons-left/right .iconにはpointer-events: noneが指定されてるからクリックに反応しないよ、というお話。

やりたかったこと

input内に入れたiconをクリックするとinputの中身が消えたり隠れていたパスワードが表示されたりしたい！

書いてみた

sample.html

<div class="control has-icons-right">
  <input type="text" class="input" id="input">
  <span class="icon is-small is-right" onclick="delete('input')">
    <i class="fas fa-times"></i>
  </span>
</div>

※JSの実装は省略

動かしてみた

押しても押してもクリックに反応しない！DevToolsで見てもイベントリスナはちゃんと付与されてるし、要素.click()でちゃんと発火するし、z-indexも十分大きいし…

…あれ？

.control.has-icons-left .icon, .control.has-icons-right .icon {
    color: #dbdbdb;
    height: 2.5em;
    pointer-events: none;　←これだ！！！
    position: absolute;
    top: 0;
    width: 2.5em;
    z-index: 4;
}

直してみた

sample.html

<div class="control has-icons-right">
  <input type="text" class="input" id="input">
-  <span class="icon is-small is-right" onclick="delete('input')">
+  <span class="icon is-small is-right delete_icon" onclick="delete('input')">
    <i class="fas fa-times"></i>
  </span>
</div>

sample.css

.delete_icon {
    pointer-events: all !important;
}

ちゃんと動いた。めでたしめでたし。