ion-searchbarでcloseボタンのアクションをユーザフレンドリーにする方法

Ionic Frameworkを使っていると、 ion-searchbar を利用する場面も多いでしょう。多くのリストから絞り込む用途に使われることがほとんどなのですが、実際ユーザとして使っているとひとつの問題があります。それは、closeボタンを押下しても、 ion-searchbar にフォーカスされたままの状態になることです。

closeボタンを押下しても、カーソルが残っていることがわかるかと思います。これは外部キーボードを利用している時は問題になりませんが、モバイルデバイスでオンスクリーンキーボードを利用してる時は問題になります。

closeボタンを押下してもオンスクリーンキーボードは立ち上がったままです。

もちろんこれにはシナリオが2つあります。

• 入力内容をすべて消去して、別のキーワードを入力したい
• 入力内容をすべて消去して、すべてのリストを表示したい

前者だとキーボードが立ち上がったままなのは問題ありませんが（Twitterの絞り込み検索のような場合）、在庫管理などで一時的に絞り込むシナリオを描いていた場合は、そのシナリオに沿うとユーザは

1. closeボタンを押下したあと
2. どこか別のエリアをタップしてフォーカスを外してキーボードを非表示にする

というプロセスを踏むことになります。これは手間ですよね。

なので、後者のシナリオの場合はこのように実装しましょう。

<ion-toolbar>
  <ion-searchbar
    (ionClear)="searchbarBlur()"
  >
</ion-toolbar>

public async searchbarBlur() {
  setTimeout(() => (document.activeElement as HTMLElement).blur(), 100);
}

document.activeElement は、DOM内で現在フォーカスを持っている要素を返します。

またsetTimeoutをいれているのは、closeボタンをタップすることにより ion-searchbar もタップしたことになり、ミリセカンド秒後にフォーカスがあたるので、必ずフォーカスが当たったあとにフォーカスを外すためです。

これで、closeボタンをタップしたらフォーカスが必ず外れて、キーボードが非表示になるようになりました。簡単ですね。

それではまた。