Stimulusが保持していた要素参照が古いままになった

はじめに

現在開発中のWebアプリをStimulusへ移行したところ、不具合が発生しました。

ハマったのでメモしておきます。

問題

カレンダー画面で日記を新規投稿したあと、別の日付をクリックしても、その日の投稿内容が表示されない。

原因

Turboがフレームを差し替えた結果、Stimulusが保持していたノードが、古いノードを参照したままになっていた。そのため、クリックしても表示が更新されない。

# ❌NG
connect() {
  this.dateEl = document.getElementById('post-date');
  this.contentEl = document.getElementById('post-content');
}

対策

クリック直前に参照を取り直すことで、常に最新のノードを扱えるようにする。

# ✅OK
connect() {
  this.refreshCurrentPostRefs();
}

refreshCurrentPostRefs() {
  this.dateEl = document.getElementById('post-date');
  this.contentEl = document.getElementById('post-content');
}

handleClick(e) {
  this.refreshCurrentPostRefs();
  ...
}