モバイルビューの各種モーダルでユーザーをリストに追加するのが非常に難しい

:bug: 概要

ユーザーを追加するためのモバイルビューのドロップダウンリストモーダルが、画面外に表示され、スワイプして確認しようとした際に失敗することがよくあります。

安全モードでこれを再現できた場所のいくつかは以下の通りです:

  • グループページからユーザーをグループに追加する
  • トピックや投稿をユーザーに割り当てる(例:トピックのレンチメニューまたは投稿の管理レンチメニューから)
  • 他のユーザーをプライベートメッセージに招待する
  • ユーザーを無視リストに追加する /my/preferences/users(ミュート機能はモーダルがないため正常に動作します)

稀に、数回優しくスワイプするとモーダルが画面内に表示され続けることがありますが、非常に不安定で、すぐに閉じてしまうことも多いです。また、iPhone 15 Pro Max という大型のスマートフォンを使用しているため、より小型のモデルではこの現象がさらに悪化する可能性があります。

:woman_walking: 再現手順

グループにユーザーを追加するためのドロップダウンリスト入力に失敗した例を以下に示します:

  1. 管理者としてグループページにアクセスし、「+ ユーザーを追加」ボタンをタップ
  2. 画面下部に検索フィールド付きのモーダルが表示される
  3. 検索フィールドをタップして入力し始めると、モーダルがビューポートの上部に移動するのを確認
  4. モーダルをドラッグして入力フィールドにアクセスしようとする
  5. 失敗:モーダルが自動的に閉じ、グループメンバーシップページに戻ってしまう

:white_check_mark: 期待される結果

モーダルが画面内に表示されたままになること。なお、投稿管理メニューから投稿の所有者を変更する同様のモーダルは期待通りに動作します:

:cross_mark: 実際の結果

上記の通り、ユーザー検索入力フィールドがモーダルがビューポートの上部にありすぎるため、画面外に表示されています。

:books: 追加情報

  • iPhone 15 Pro Max を使用しており、最新の Safari、Chrome、Firefox(および PWA)の安全モードで上記を再現できます。iPad では、横向き・縦向きどちらの向きでも再現できませんでした。Android モバイルでの確認は行っていません。
  • デスクトップブラウザの開発者ツールでモバイルモードを使用してもこの問題は再現しません。実際のモバイルデバイスでのみ再現可能です。
  • この問題が Discourse 由来か iOS 由来かは不明です(投稿の所有者変更モーダルが正常に動作していることから、Discourse 由来だと推測しています)。
「いいね!」 4

はい、これは面倒な挙動ですね!私はここで修正の試みが動作しています:

@j.jaffeux さん、モーダルやメニューについて多くのご経験がありますが、これについてご意見はありますか?

「いいね!」 4

上記の変更をマージしました。副作用なく状況が改善することを願っています。Apple デバイスにおける固定モーダルのサポートは長年困難を伴ってきたため、さらに調整が必要になる可能性があります。

「いいね!」 1