htmlでselectのキー入力による選択の変更を無効化したい

Question

htmlでselect要素を一度押して選択肢を選んだあと、選択状態が続いており、その状態でキー入力をするとその頭文字にあったものが選択されてしまいます。
仕様であることはわかっているのですが、キー入力を扱うページを作っているため、誤って変更されてしまうのが非常に煩わしいです。
自動で選択状態を解除したり、あるいはキー入力による変更を無効化できる方法があれば教えていただきたいです。
javascript(jQuery)でも構いませんし、Chromiumでしか動かないものでも大丈夫です。

Answer 1

選択後にfocusが合ったままなのが原因なのでblur()で解除すれば良いかと思います。

<select name="pets" class="select">
    <option value="">--Please choose an option--</option>
    <option value="dog">dog</option>
    <option value="cat">cat</option>
    <option value="hamster">hamster</option>
    <option value="parrot">parrot</option>
    <option value="spider">spider</option>
    <option value="goldfish">goldfish</option>
</select>


<select name="pets" class="select">
    <option value="">--Please choose an option--</option>
    <option value="dog">dog</option>
    <option value="cat">cat</option>
    <option value="hamster">hamster</option>
    <option value="parrot">parrot</option>
    <option value="spider">spider</option>
    <option value="goldfish">goldfish</option>
</select>

const selects = document.querySelectorAll('.select')

for (const select of selects) {
  select.onfocus = (e) => e.target.blur()
}

Comments

[Karakuri_Polta]

素早い回答ありがとうございます。実行した結果問題なく動作し、フォーカスの解除ができました！ありがとうございました！