コメントを編集・保存するたびにIntersectionObserverの監視が重複する

[utsubo256]

概要

コメントを編集・保存するたびに、同じ編集用テキストエリアを監視するIntersectionObserverが追加される。
保存後にテキストエリアを画面外・画面内へスクロールすると、異なる複数のObserverから同じ要素に対する通知が発生することを確認した。

保存ボタンのクリック処理で TextareaInitializer.initialize() を呼び出しており、そのたびに新しいIntersectionObserverを生成していることが原因と考えられる。

再現方法

準備

bootcamp/app/javascript/textarea-initializer.js

Lines 42 to 50 in ade4d8e

	textareas.forEach((textarea) => {
	new IntersectionObserver((entries) => {
	entries.forEach((entry) => {
	if (entry.target.scrollHeight !== 0) {
	autosize.update(entry.target)
	}
	})
	}).observe(textarea)
	})

監視の重複を確認するため、上記のtextarea-initializer.jsに以下のように一時的なログを出力するためのコードをい追加する。
import文の下のクラス定義の前と、IntersectionObserverを生成する部分を次のようにする。

// import ...
// 省略
let observerNumber = 0

export default class {
// 省略
    textareas.forEach((textarea) => {
      const number = ++observerNumber

      new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          console.log(
            `Observer ${number}`,
            entry.target.id,
            `画面内: ${entry.isIntersecting}`
          )

再現手順

1. 編集可能なコメントがあるページを開く
2. コメントを編集して保存する操作を2回行う
3. 同じコメントの編集フォームを再び開く
4. ログ出力が落ち着いたら、開発者ツールのConsoleをクリアする
5. 編集用テキストエリアを画面外へスクロールし、再び画面内に戻す
6. 同じテキストエリアに対して、異なる複数のObserverから通知が出ることを確認する

確認時には、同じテキストエリアに対してObserver 2・3・4がそれぞれfalse と true を通知した。

※ Stimulus側の初期化を無効にし、既存の initializeComment() による初期化を有効にした状態で確認する。移行途中の二重初期化と区別するため。

期待される振る舞い

コメントの編集・保存を繰り返しても、同じテキストエリアへのIntersectionObserverの監視が重複しないこと。

スクリーンショット

環境

コミットハッシュ: ade4d8e

関連Issue

• コメント機能を Turbo Streams + Stimulus に移行する #10357
  • コメント機能のStimulus移行を検討する中で発見した、既存処理の問題