Search bar quality of life improvements#154
Open
avik-ch wants to merge 3 commits into
Open
Conversation
|
@avik-ch is attempting to deploy a commit to the umn social coding Team on Vercel. A member of the Team first needs to authorize it. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Not an open issue but I thought the search bar could benefit from a few UX tweaks:
Autofocus
Added functionality so that the search box is focused on page load so that users can start searching without having to make an additional click. This feels normal for a website that is based around search. The default html
autofocusattribute does not work, probably due to some timing issue with react, next js and how it gets loaded to DOM. That is why the complicated useRef workaround was used. Happy to consider feedback on how to improve this.Initially I made it autofocus on every page load; however, it looked odd on pages other than the home page with its halo around the borders when focused. So, the autofocus prop was added to only focus the search bar on the home page. If needed, we can change this to happen on all pages.
The
/jump shortcutAdded a quick way to jump to the search box by pressing
/. This is expected behavior on most search based sites. Also added a quick toast like google to signal the existence of this feature to someone typing without focusing on the search box.