【Vuetify3】モーダル内のセレクトボックスがなんかおかしい

!! Vuetify v3.2.2では解消しているようです !!

今回の解決方法

v-dialogにscroll-strategy="none"を追加する

状況

詳細画面から、それぞれの情報を編集できるモーダル(v-dialog、いくつかある)を開いて情報を更新したい。
でもモーダル内のセレクトボックス(v-select)がどうにもおかしい、、
数回クリックしないと選択肢を表示してくれない、、

コードを見たり動きを調べたりしていると、
画面の上のほうにあるボタンから開けるモーダル内では正常な動きをして、
下のほうのモーダル内でのみ挙動が変になっていることに気付いた。

原因

同じことが起こっていそうなissueを発見。
scroll-strategyが悪さをしているとのこと。

なるほど、だからスクロールが必要なボタンから開けるモーダルでだけ挙動がおかしかったのかと納得。

つぶやき

なんとなく眠れなくて、ふと今日少し詰まったところを残しておこうと思い書きました。
ここ1.2ヶ月は追加機能の要件定義や設計(しっかりしたものというわけではない)、細々とした運用作業をやることが多く、
それはそれで仕様を考える楽しさもありますが、
やはりコードを書いてエラーと向き合うのも面白いなと思わされた日となりました。