Investigate how to bypass navigation and keep the focus

[YoruNoHikage]

When tabbing through the menu, once we get to the search field, and we tab again, the focus is lost. This is due to the navigation going to /search page when focusing, going back to / is the field is empty when we leave the field.

The ideal behavior is:

1. Tabbing to the search field.
2. Writing something redirects you to /search.
3. Clearing the field makes you go back to /.
4. Tabbing again focuses the next element

But due to Next's routing system, this is hard to accomplish (if not impossible?), you lose the focus making the cursor jump to the start of the input. If the state is local, you lose it as well.

An alternative plan is something I've come up for now:

1. Tabbing to the search field.
2. Focus on the search field makes you navigate to /search.

3. a. Input empty: the blur event makes you navigate back to /, losing focus. ⚠️ b. Input filled: tabbing again focuses the next element

I need to look back at what was really blocking regarding Next's router's behavior and investigate is there isn't a way we can achieve the ideal behavior stated above.

[engleek]

Well, maybe changing links and routing isn't necessary? Or you could debounce it to make it easier to manage.

[YoruNoHikage]

Okay I played a bit with it tonight, maybe it was just me but everything pretty much works. Still, there are some behaviors that are not ideals and maybe that was the reason I picked this broken solution above instead. Accessibility is back but I don't see anything other than:

• When erasing the last character in the input, we go back to previous page / homepage. (sounds like the preferred behavior) Problem: having a re-render causing the input to lose focus which is annoying when you still want to search for something else.
• When the input loses focuses and there's nothing in the input, we go back to the previous page / homepage. Problem: same as above and we lose accessibility and that was the reason for the issue in the first place.

Well, maybe changing links and routing isn't necessary? Or you could debounce it to make it easier to manage.

Routing is kind of necessary, the page can be shared. It's also part of the web browsing history making it natural to go back and forth between results and the search page. Debouncing the navigation could temporarily mitigate this annoying thing though.

[engleek]

Routing is kind of necessary, the page can be shared. It's also part of the web browsing history making it natural to go back and forth between results and the search page. Debouncing the navigation could temporarily mitigate this annoying thing though.

That certainly applies to classic websites. How does Google do it? I think it's autocomplete then the url only changes when you press enter. Maybe combining the both wasn't the best solution after all. Mea culpa on that one.