Chrome 145のスクロール挙動変更に対応

Chrome 145で導入された新機能により、<wa-dropdown>要素のフォーカス時に意図しないドキュメントスクロールが発生する問題が修正されました。この変更は、focus()メソッドにpreventScrollオプションを追加することで、Floating UIによる既存のスクロール管理を維持しています。

背景

Chrome 145ではスクロール動作に関する新機能が導入されました。この変更により、ドロップダウンメニュー内の項目にフォーカスが移動する際に、ブラウザがその要素を可視領域に表示しようとして自動的にスクロールする動作が発生するようになりました。

WebAwesomeのドロップダウンコンポーネントはFloating UIを使用してポップアップの位置とスクロールを管理していますが、Chrome 145の新しいスクロール動作がこれと競合し、意図しないスクロールが発生していました。#2075はこの競合を解消しています。

技術的な変更

focus()メソッドの呼び出しに{ preventScroll: true }オプションが追加されました。この変更はdropdown.tsに7箇所、dropdown-item.tsに1箇所の計8箇所に適用されています。

変更前:

const items = this.getItems();
if (items.length > 0) {
  items.forEach((item, index) => (item.active = index === 0));
  items[0].focus();
}

変更後:

const items = this.getItems();
if (items.length > 0) {
  items.forEach((item, index) => (item.active = index === 0));
  items[0].focus({ preventScroll: true });
}

主な変更箇所は以下の通りです：

• ドロップダウン表示時の初期フォーカス設定
• キーボード操作（Escape、Arrow、Home/End）によるフォーカス移動
• サブメニューの開閉に伴うフォーカス移動
• トリガー要素へのフォーカス復帰

これらすべてのケースでpreventScrollオプションが追加され、ブラウザによる自動スクロールが抑制されるようになりました。

設計判断

すべてのfocus()呼び出しに一律でpreventScrollを適用する方式が採用されました。

Chrome固有の問題ではありますが、条件分岐によるブラウザ判定は行わず、すべてのブラウザで統一的にスクロールを無効化しています。これは、Floating UIがすでにポップアップの配置とスクロール管理を担っているため、ブラウザの自動スクロールが不要であるという前提に基づいています。

preventScrollオプションはWeb標準のFocusOptionsインターフェースの一部であり、Chrome以外のブラウザでも広くサポートされています。ブラウザ判定を避けることで、将来的に他のブラウザで同様の挙動が導入された場合にも対応できる設計になっています。

まとめ

本PRは、Chrome 145の新機能によるスクロール動作の変更に対し、focus()メソッドにpreventScrollオプションを追加することで対応した変更です。Floating UIによる既存のスクロール管理を維持しながら、ブラウザの自動スクロールを抑制することで、意図しないスクロール動作を防いでいます。ブラウザ判定を避けた汎用的な解決策により、将来の互換性も確保されています。