Make the filter by text feature work with <select> elements

[the-blank-x]

Steps to reproduce

1. Go to https://tildes.net/~tech/16p3/reddit_communities_are_switching_to_nsfw_to_create_some_friction_and_rob_reddit_of_ad_revenue or https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#examples
2. Activate hints
3. Type in the text of a <select> element's value

Screenshots

Description

When you try to acivate a <select> by typing the text of its current value, it doesn't get activated. I'm not sure what to do for elements with multiple though

Debug info

Debug info

{
  "version": "1.3.1",
  "browser": "firefox",
  "userAgent": "Mozilla/5.0 (X11; Linux x86_64; rv:113.0) Gecko/20100101 Firefox/113.0",
  "browserInfo": {
    "name": "Firefox",
    "vendor": "LibreWolf",
    "version": "113.0.2-1",
    "buildID": "20230531125735"
  },
  "platformInfo": {
    "os": "linux",
    "arch": "x86-64"
  },
  "storage.sync": {
    "normal.ctrl-j": "EnterHintsMode_Click",
    "normal.ctrl-k": "EnterHintsMode_BackgroundTab",
    "normal.ctrl-J": "EnterHintsMode_ManyClick",
    "normal.ctrl-K": "EnterHintsMode_ManyTab",
    "normal.ctrl-L": "EnterHintsMode_Select",
    "normal.ctrl-:": "EnterHintsMode_ForegroundTab",
    "debug.Background.PREFER_WINDOWS": false,
    "debug.ElementManager.ROLES_CLICKABLE": [
      "button",
      "checkbox",
      "link",
      "menuitem",
      "menuitemcheckbox",
      "menuitemradio",
      "option",
      "radio",
      "searchbox",
      "spinbutton",
      "switch",
      "tab",
      "textbox"
    ],
    "hints.ctrl-Enter": "ActivateHintAlt",
    "debug.ElementManager.ATTRIBUTES_CLICKABLE": [
      "aria-checked",
      "aria-selected",
      "data-dismiss",
      "data-ember-action",
      "data-image-url",
      "data-line-number",
      "data-permalink-path"
    ],
    "debug.ElementManager.REGEX_CLICKABLE_CLASS": "\\bcm-|ͼ|\\bmtk|sparkline-year-label|js-wiki-toggle-collapse",
    "hints.shift-Backspace": "Backspace",
    "hints.shift-Enter": "ActivateHint"
  },
  "storage.local": {
    "tutorialShown": true
  },
  "language": "en-US"
}

[lydell]

This happens when I use the Tab key to focus the selects as well, so it doesn’t seem like a Link Hints issue.

[the-blank-x]

Odd, I can tab over to the selects

select-tabbing.mp4

[lydell]

I’m not able to play the video, unfortunately.

What do you mean by “tab over”?

[the-blank-x]

Tab over as in pressing tab until the select element is focused (as i assume that's what you mean by [using] the Tab key to focus the selects). Try playing the video in mpv or vlc

[lydell]

The video worked in VLC.

I misunderstood what you meant. I didn’t get that you used the filter by text feature. It makes sense to me now.

[the-blank-x]

Decided to try to figure out what to do for selects with multiple, and I noticed that you can use IntersectionObserver on its options to see when they are on screen. Something like:

"use strict";

let observer = new IntersectionObserver(function (entries) {
    for (let entry of entries) {
        console.log(entry.target, "is intersecting?", entry.isIntersecting);
    }
}, {});
for (let option of document.querySelector("select").options) {
    observer.observe(option);
}

I can't find a way to see when the header of an optgroup is on screen though. Also, you'd probably want to only focus the select instead of an option, since you would have to take into account other options that were already selected.