Search dropdown does not hide when input loses focus

[erinmorrissey-hearst]

Describe the bug
When navigating through the starter store theme nav using the keyboard (tab key), the search bar dropdown menu doesn't go away when tabbing away from search and to the sign-in icon.

Screen.Recording.2023-10-18.at.4.04.28.PM.mov

Expected behavior
When a user tabs away from the search input, the search dropdown should hide.

Current behavior
See above.

Steps to reproduce

1. Using the tab key, navigate through the site header to/through the search bar and search dropdown
2. Continue tabbing to the sign-in icon
3. Observe that the search dropdown menu stays visible and makes it hard to see where focus is once you continue tabbing through the main site navigation menu

Possible Solution
In the SearchInput component, on line 109, add the following code to trigger the search dropdown to hide when focus is lost on search input child elements:

onBlur={(e) => {
  if (!e.currentTarget.contains(e.relatedTarget)) {
    setSearchDropdownVisible(false)
  }
}}

Workspace
n/a
Additional context

Add any other context, screenshots, or comments about the problem.

[hellofanny]

Thanks for reporting it and offering your solution. 🌟
I'll create a task to address it. In the meantime, feel free to create a PR with your suggestion. Your contributions are always welcome! 😊