iphone、ipad（Safari）モーダルウインドウを開いた時に自動的にselectボックスが開くことを防ぐ方法

本事象はプルダウンがモーダルウインドウの最初の項目に配置されている場合の現象で、windows、android(chrome)では発生せず、iphone、ipad（Safari）の場合のみプルダウンをクリックした状態（プルダウンの中が表示された状態）でモーダルウインドウが開いてしまう現象です。

プルダウンが開いてしまうと画面の情報が初期表示時に見えないため、ユーザビリティ的にはよろしくありませんので解決方法のサンプルコードを以下に記載します。

■html

<html>
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>

<!-- フォームを含むモーダルダイアログ -->
<dialog id="favDialog" onclick="">
  <form>
    <p>
      <label>
        Favorite animal:
        <select id="select1">
          <option value="default">Choose…</option>
          <option>Brine shrimp</option>
          <option>Red panda</option>
          <option>Spider monkey</option>
        </select>
      </label>
    </p>
    <div>
      <button value="cancel" formmethod="dialog">Cancel</button>
      <button id="confirmBtn" value="default">Confirm</button>
    </div>
  </form>
</dialog>
<p>
  <button id="showDialog">Show the dialog</button>
</p>
<output></output>

	<script type="text/javascript" src="./js/modal4.js"></script>

</body>
</html>

■javascript

ポイントは「selectEl.blur();」メソッドでセレクトボックスからカーソルを外す箇所

const showButton = document.getElementById("showDialog");
const favDialog = document.getElementById("favDialog");
const outputBox = document.querySelector("output");

const selectEl = document.getElementById("select1");
const confirmBtn = document.getElementById("confirmBtn");

// "Show the dialog" ボタンで <dialog> をモーダルに開く
showButton.addEventListener("click", () => {
  favDialog.showModal();

　// カーソルを外す
  selectEl.blur();
});

// "Favorite animal" 入力で、送信ボタンの値を設定する
selectEl.addEventListener("change", (e) => {
  confirmBtn.value = selectEl.value;
});

// "Cancel" ボタンで [formmethod="dialog"] による送信を行わずにダイアログを閉じ、close イベントを発行する
favDialog.addEventListener("close", (e) => {
  outputBox.value =
    favDialog.returnValue === "default"
      ? "No return value."
      : `ReturnValue: ${favDialog.returnValue}.`; // 空文字列ではなく、既定値かどうかを調べる必要がある
});

// ［確認］ボタンが既定でフォームを送信しないようにし、`close()` メソッドでダイアログを閉じ、"close" イベントを発生させる
confirmBtn.addEventListener("click", (event) => {
  event.preventDefault(); // この偽フォームを送信しない
  favDialog.close(selectEl.value); // ここで選択ボックスの値を送る必要がある
});