[Search] Bring active result into view #3143
Description
Search supports scrolling search since the following:
[Search] Scrolling Results #771
[Enhancement]: [Search] Scrollable search result #1350
However, this does not fix a common scenario, depending on the business logic of a website, whereby active search items are not brought into view.
Put the search box at the bottom of the page. When the search results come in, they open in a drop-down menu below the input field, out of the viewport, out of view.
What the user must then do is grab the mouse, scroll the window and bring the fields of results into view. This is true even with a scrolling search or even when the result set is short.
What the user cannot do is, after having typed their query, use the keyboard down-arrow to select the entry they want, because they are outside the viewport.
Depending on the website needs and the business logic, that can be a very common scenario.
A real life scenario that I am currently trying to fix is for a business workflow that is very data-entry intensive. By necessity, and in accordance with the workflow, the search input field is at the bottom of the screen. Since there is a lot of data to search and enter, we try to make the process as smooth and painless as possible. It means we try to have a data-entry workflow that does not require grabbing the mouse and scrolling down the page for each single search. The most efficient workflow requires a keyboard-only interaction: type query => use keyboard down-arrow to select the wanted result => press enter to validate => repeat by typing next query.
So, basically, it is necessary to implement a hack that will automatically bring the active search result item into view.
This is a long-standing issue and other users have asked for it in the past, for Semantic-UI:
[Dropdown] How to receive an event when scrolled down to to bottom? Semantic-Org/Semantic-UI#6166
[Search] Option to set max-height for search results Semantic-Org/Semantic-UI#6488