search: Add experimental feature to select search query input suggestions with "Enter"

Review changes
Download
Patches
Plain diff

Merged search: Add experimental feature to select search query input suggestions with "Enter"

fkling/query-input-enter into main

Overview 2
Commits 4
Pipelines 0
Changes 14

Merged search: Add experimental feature to select search query input suggestions with "Enter"

Warren Giffordrequested to merge

fkling/query-input-enter into main Jul 20, 2022

Overview 2
Commits 4
Pipelines 0
Changes 14

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.

Merge request reports

Activity

Filter activity

Approvals
Assignees & reviewers
Comments (from bots)
Comments (from users)
Commits & branches
Edits
Labels
Lock status
Mentions
Merge request status
Tracking

Please register or sign in to reply

0 Assignees

None

Select assignees

0 Reviewers

None

Request review from

Labels

cla-signed codemirror team/search-product

Select labels

Manage project labels

Milestone

None

Time tracking

No estimate or time spent

1 Participant

There are currently no pipelines.

To run a merge request pipeline, the jobs in the CI/CD configuration file must be configured to run in merge request pipelines and you must have sufficient permissions in the source project.