Search Bar loses Focus when you don't type fast

[Layak-Ali]

Description

I'm having trouble with Layer5's website's search function. When I type to search for blogs, it shows results for each letter I enter. However, if I don't type quickly, it removes my cursor, which makes the search frustrating. For instance, I need to click the search bar multiple times to search for something like 'How to bind Kubernetes'.

Expected Behavior

The cursor should remain in the search bar without being interrupted or removed, regardless of typing speed.

Screenshots

Environment:

• Host OS: Windows
• Browser: Brave Chrome

---

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

• 📚 See contributing instructions.
• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.

Join the Layer5 Community by submitting your community member form.

[leecalcote]

@kayceeDev will you validate this report as an issue?

[kayceeDev]

@kayceeDev will you validate this report as an issue?

This is not an issue. We run a query with the value in the search box after every 5 seconds of inactivity. That is, if you add a new letter to the search and don't type anything for 5 secs, a query is run with the value inside the search. We used a debounce input to make sure the search box doesn't lag when you type quickly. All you have to do when you see that the focus is removed from the search is to set it in focus again and type more words or a new word. Remember that without this delay before making the search, we will have to make a query for each keystroke immediately and this lags the UI.

[Layak-Ali]

While I was searching, the focus was removed after just 1 second of inactivity. This made it difficult to search for a specific blog properly.

[kayceeDev]

While I was searching, the focus was removed after just 1 second of inactivity. This made it difficult to search for a specific blog properly.

Alright, I will validate this issue @leecalcote. An optimization idea is a welcomed one. @Layak-Ali looking forward to your PR.

[iArchitSharma]

@kayceeDev, I tried searching as a user, and it's taking less than a second of inactivity before debouncing
It's difficult to type in the search bar.

[kayceeDev]

@Layak-Ali will you like to take up this issue?

[iArchitSharma]

@kayceeDev, I'd be happy to work on this issue if @Layak-Ali isn't planning to.

[kayceeDev]

@kayceeDev, I'd be happy to work on this issue if @Layak-Ali isn't planning to.

Alright. Let's wait for @Layak-Ali awhile.

[kayceeDev]

@kayceeDev, I'd be happy to work on this issue if @Layak-Ali isn't planning to.

Here you go.

[Layak-Ali]

Oh sorry guys @kayceeDev @iArchitSharma for not responding. I was busy the last few days due to exams. I planned to work on it today/tommorow but its fine if you want to work on it.

[iArchitSharma]

@kayceeDev, the debounceTimeout was initially set to 500ms (0.5 seconds). I am submitting a pull request to change it to 5000ms (5 seconds)

[kayceeDev]

@kayceeDev, the debounceTimeout was initially set to 500ms (0.5 seconds). I am submitting a pull request to change it to 5000ms (5 seconds)

Think about this before increasing the timeout, is 5 secs user friendly? Will a user searching for a blog willing to wait for 5 seconds to have search results returned? Can you make it better and return search results in real time? What are the edge cases? will there be a performance reduction since the query will be run on each value typed in the search box? If all these questions are checked out and increasing the timeout helps, then maybe that can be accepted as the solution.

I am open to discussing your thoughts process with increasing the timeout.

[kayceeDev]

@Layak-Ali can you also share ways you had in mind to solve this issue to give @iArchitSharma some ideas

[Layak-Ali]

I planned to increase the time to 1 or 2 seconds which is more than enough. Users will likely press enter and there would be no point of increasing it to 5 seconds.

[kayceeDev]

I planned to increase the time to 1 or 2 seconds which is more than enough. Users will likely press enter and there would be no point of increasing it to 5 seconds.

Thanks @Layak-Ali but the intended search is real time and not by pressing a button. Will you be free to review @iArchitSharma PR and work with him on improving the results?

[iArchitSharma]

@kayceeDev that's a valid point. While debouncing search requests for 5 seconds may help reduce unnecessary searches, it could negatively impact the user experience for some users as it is meant to be real time

As an alternative, we can consider implementing Throttling searches instead of debouncing, to return results after each keystroke but limit the rate of requests.

[iArchitSharma]

@kayceeDev, I've been giving this some thought, and I believe that implementing throttling might be both complex and unnecessary. The primary goal we wanted to achieve was to maintain focus on the search bar even after 500ms of typing. This could be accomplished simply by adding the autoFocus property.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.