search: Add experimental feature to select search query input suggestions with "Enter"
Created by: fkling
This commit adds the ability to select search query input suggestions with "Enter". Previous attempts at this didn't work reliably/satisfactory because both CodeMirror and Monaco would always select the first suggestion. If suggestions took a while to load and would juuuust appear when you where pressing Enter to submit the query you would insert the first suggestion instead.
@codemirror/autocomplete v6.1 introduces the option to not select the first suggestion by default, avoiding this problem. However, since this changes how the query input works (users have to explicitly select an item before it be inserted), I'm putting this behind a feature flag. I'm also removing the "Tab" label from the selected suggestion.
Demo (you can't tell but I'm pressing Enter):
https://user-images.githubusercontent.com/179026/180072870-91f663bd-4f1d-4fee-8b83-e3a53b02c17a.mp4
Use "Tab" to select still works as before. However I noticed an issue if
multiple suggestions are shown, none is selected and "Tab" is pressed:
The suggestions popover closes, neither is a cursor visible nor is the
next button selected. It looks like <body> receives the focus which is
weird. The user can't easily go back to the input, only by clicking into
it. Even worse, the query input still appears to be focused.
I can't replicate this on https://codemirror.net/try/ so maybe it's some
something weird with our setup.
Given that the feature is behind a flag, I think it's still safe to
continue with this.
Demo (you can't tell but I'm pressing Tab and then I'm very confused):
https://user-images.githubusercontent.com/179026/180072970-04df1495-9e69-4d5a-b65b-766446984cbc.mp4
Test plan
Manual testing. Enter search query, notice that suggestions are not selected by default. Pressing enter submits the query. Selecting a suggestions and then pressing Enter (or Tab) inserts the suggestion.