bootstrapのモーダルとautosizeの組み合わせ

やりたいこと

bootstrapモーダル内のtextareaに対してautosizeメソッドを適用させたい。

※autosizeとは
textareaの高さを自動調節してくれるプラグイン。詳しくはこちら。

課題

モーダル出現時にautosizeを適用させても、高さが自動調節してくれない。
適用はできているようだが、もともと長文のデータがあった場合に、それに合わせた高さにならないため、最初は全文が見えない状態になる（改行を入れると自動調節される）。

ソースコード(失敗例)

<!-- モーダルを呼びだすボタン -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" id="btn">
  ボタン
</button>

<!-- モーダル内の要素 -->
<textarea id="ta"></textarea>

// ボタンクリック時にautosize発動
$("#btn").click(function(){
	const ta = $("#ta")

	// textareaに長文を入れる
	ta.text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")
	
	// textareaにautosize適用
	autosize(ta)
	autosize.update(ta)
})

これでは先ほど書いた通り、textareaの高さは自動調節されず、全文表示されない。

ソースコード(成功)

ポイントはautosizeを発動するタイミングだった。
ボタンを押すタイミングではなく、モーダルが見えてから発動してみる。

// モーダルが見えてからautosize発動
$("#exampleModal").on('shown.bs.modal', function(){
	const ta = $("#ta")
	// textareaに長文を入れる
	ta.text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")
	
	// textareaにautosize適用で高さ自動調節
	autosize(ta)
	autosize.update(ta)
})

これならtextareaが自動調節され、全文が見える状態になる。
「モーダルが見えたとき」というイベントはbootstrapの公式で用意してくれている。

参考