Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Search] Bring active result into view #3143

Open
dreaming-augustin opened this issue Dec 24, 2024 · 1 comment
Open

[Search] Bring active result into view #3143

dreaming-augustin opened this issue Dec 24, 2024 · 1 comment
Labels
state/awaiting-investigation Anything which needs more investigation type/bug Any issue which is a bug or PR which fixes a bug

Comments

@dreaming-augustin
Copy link
Contributor

dreaming-augustin commented Dec 24, 2024

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

@dreaming-augustin dreaming-augustin added state/awaiting-investigation Anything which needs more investigation state/awaiting-triage Any issues or pull requests which haven't yet been triaged type/bug Any issue which is a bug or PR which fixes a bug labels Dec 24, 2024
dreaming-augustin added a commit to dreaming-augustin/Fomantic-UI that referenced this issue Dec 24, 2024
It allows websites to implement a solution for this:

[Search] Bring active result into view fomantic#3143
fomantic#3143
@dreaming-augustin
Copy link
Contributor Author

dreaming-augustin commented Dec 24, 2024

Within the pull request, I shared a solution (hack) to solve the problem above, that depends on the following pull request:

[Search] trigger 'focusin', 'focusout'. #3144

@lubber-de lubber-de removed the state/awaiting-triage Any issues or pull requests which haven't yet been triaged label Dec 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
state/awaiting-investigation Anything which needs more investigation type/bug Any issue which is a bug or PR which fixes a bug
Projects
None yet
Development

No branches or pull requests

2 participants