Search box is not keyboard friendly

[OnkarRuikar]

Summary

The Search box is not easy to use using only keyboard and without mouse.

Consider a scenario where a user is on MDN home page and trying to search Request interface using "request" word.

1) After, typing search text and hitting Enter key, the first suggestion is forced on to the user. Have to hit down arrow key 5 times to get to the option which performs full search. In case of GitHub and Google searches, they give priority to the user entered text.

2) On home page, some search suggestions go out of the viewport. Even after hitting down arrow key they don't come into view.

Without scrolling down(i.e. involving mouse) we can't see the last full-search option. This makes above point 1) more painful.

3) Suggestions do not get cycled on pressing Tab key like they do on google search.

4) On blur, by clicking outside, suggestions are not hidden.

5) Suggestions are sorted by "popularity". While actual search results are sorted by "best". User may get confused by seeing different outcomes. On home page:

---

Results page:

6) On home page there are two search boxes. One in top right corner and a giant one in the center of the page.

URL

https://developer.mozilla.org/en-US/

Reproduction steps

Issue 1:

1. Open MDN home page in Chrome.
2. Type "request" in the search box that is at the center.
3. Hit Enter key. It opens page for '400 Bad Request' and not search results page.

Issue 2:

1. Set browser zoom to 0.
2. On MDN home page type "request" in center search box.
3. Six suggestions are listed below the search box.
4. If your monitor resolution is not high(mine is 1366x768) some suggestions will go off the viewport.
5. Without using mouse, to scroll down, try to select option "Site search for request".
6. There is no way to know which option we are on.

Issue 3:

1. On MDN home page in center search box type "request".
2. Try to cycle through suggestions using Tab key, like we can do on google search.

Issue 4:

1. Type "request" in search box.
2. Click outside the search box. The suggestions are not hidden.

Issue 5:

1. On home page search for text "request".
2. And choose "Site search" suggestion.
3. Notice the difference between suggestions and results sort order.

Expected behavior

• [ ] 1. Should be able to type search text and hit Enter/Return key in order to see full search results.
• [ ] 2. When the input box gets focused by tab or click, one of the following needs to happen:
  • make it touch top border of the viewport. We can use scrollIntoView() for this.
  • Or make highlighted option text appear in the input box like Google.com does.
• [ ] 3. By pressing tab cycle through suggestions till user hits enter or escape keys. This will bring options into view automatically. And will solve the issue 2).
• [ ] 4. On blur, by clicking outside the suggestion box, hide it.
• [ ] 5. Unless this has been done intentionally, make search results sort by "popularity" by default.
• [ ] 6. Get rid of or hide top right search box on the home page.

Actual behavior

As mentioned in summary section.

Device

Desktop

Browser

Chrome

Browser version

Stable

Operating system

Windows

Screenshot

No response

Anything else?

No response

Validations

• [X] I have read the Community Participation Guidelines.
• [X] I have verified that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] I have checked that this is a concrete bug. For Q&A open a GitHub Discussion.

[caugner]

Here's what we should do:

1. Resolve #7047, which would cause the Request page to show up first.
2. Make sure we scroll if a focused search item is not in the viewport.

PS: Maybe Downshift v7 fixes 2).