LWCのlightning-record-pickerの検索ボックスを初期化する方法

概要

LWC開発でlightning-record-pickerを使用したが、検索ボックスを初期化する方法にて少し手間取ったので、こちらに備忘として記録しておく。

対象

lightning-record-pickerを使用していて、検索ボックスの初期化方法にて詰まっている人

やりたいこと

lightning-record-pickerで設定した検索ボックスを初期化したい

説明

• 他のinput要素と同様にvalue属性に初期化処理を施そうとしたが、検索ボックスの初期化がなぜかうまくいかなかった

      // クリアボタンなど押したら、フォームのInput要素のValueを初期化する処理
      handleClear() {
          this.firstname = ''
          this.lastname = ''
          this.accountId = '' // lightning-record-pickerのvalue属性で設定している変数
      }
  

• 上記のように空文字、nullを設定しても値の初期化はできているものの、検索ボックスには以前検索した参照先が残っているままだった...

• 壊れている？キャッシュが効いてて、クリア処理の変更が反映されていない？と機械を疑い始めました

解決方法

• 結論、lightning-record-pickerコンポーネント専用の組み込みメソッドであるclearSelection関数を使用する必要がある

• リファレンス(SpecificationタブのMethodsセクション)
  

• 使用方法

注意
clearSelection関数は検索ボックスの初期化のみでvalue属性を初期化するわけではないので、lightning-record-picker要素に設定しているvalueは別途初期化する必要があります

    this.accountId = '' // 値の初期化
    // セレクタの条件は適宜変更してください
    this.template.querySelectorAll('lightning-record-picker').forEach((element) => {
        element.clearSelection() // 検索ボックスの初期化
    })

• clearSelection関数を使用すれば、要素の値と検索ボックスの初期化をすることができました

まとめ

初めての技術を使用するときは、先入観を持たずにまずはリファレンスをきちんと読んで使用する必要があるということをまた学ばせていただきました。
こちらの記事がどなたかの一助になれば幸いです。
あと、やっぱり機械は嘘をつかない。