【メモ】Nuxt.js/BulmaのNavbarでdropdownが残ってしまう(:focus-withinが効きっぱなし)

よくあるSPAのドロップダウン。

ドロップダウンだ

<n-link class="navbar-link" to="/members">
  <span class="icon is-medium">
    <i class="fas fa-lg fa-user"></i>
  </span>
  <span>メンバー管理</span>
</n-link>
<div class="navbar-dropdown">
  <n-link class="navbar-item" to="/members">メンバー一覧</n-link>
  <n-link class="navbar-item" to="/members/new">メンバー登録</n-link>
</div>

これ、なぜか n-link click後にフォーカス状態が残ってしまい、閉じてくれない。

これは @click.native イベントに一行追加することで、閉じてくれるようになりました(手元のChromeとFirefoxで確認)。

<n-link class="navbar-link" to="/members" @click.native="hideMenu">
  <span class="icon is-medium">
    <i class="fas fa-lg fa-user"></i>
  </span>
  <span>メンバー管理</span>
</n-link>
<div class="navbar-dropdown">
  <n-link class="navbar-item" to="/members" @click.native="hideMenu">メンバー一覧</n-link>
  <n-link class="navbar-item" to="/members/new" @click.native="hideMenu">メンバー登録</n-link>
</div>

んで、このメソッドを追加。

<script>
export default {
  methods: {
    hideMenu(e) {
      e.target.blur()
    }
  }
}
</script>

以上です。

この一行を追加するまで、謎にえらい時間を費やしてしまったので、メモとして残します。