The welcome banner search input loses focus after selecting a result

Contribute UX
,

AI-generated summary

The discussion revolves around the welcome banner search input losing focus after selecting a result, with Arkshine initially reporting the issue and providing an error message stack trace. nolo shares a related issue with inconsistencies when multiple search menus are available, using the keyboard shortcut / for search, and provides a screencast. Arkshine references a related PR that should fix the behavior, but nolo notes that it doesn’t fully align the behavior, particularly with the Advanced Search Banner component. The focus hierarchy is tricky to define due to multiple combinations. Arkshine mentions that Martin is working on a PR that improves a few things, which might help with the issue, and provides a link to the PR: https://github.com/discourse/discourse/pull/32099.

1

When you enter a search in the welcome banner, the input field loses focus after selecting a suggested result. This problem also occurs when using the clear button.

Instead, it throws the following error in the console:

The image shows an error message stack trace indicating a "TypeError: Cannot read properties of null" due to a scenario where a focus search input fails to provide a value. (Captioned by AI)
The image shows an error message stack trace indicating a "TypeError: Cannot read properties of null" due to a scenario where a focus search input fails to provide a value. (Captioned by AI)592×176 6.66 KB

(I will PR tomorrow) EDIT: Martin has already a PR ready to fix that.

1 Like
2

I don’t know if this is related, but there seem to be some inconsistencies when more than one search menu is available. For example using the keyboard shortcut / for search opens and focuses the header search, even when the search banner is rendered. This also happens when the search icon would actually be hidden in the header.

3 Likes
3

Have you rebuilt recently? I can see a related PR that should fix this behavior: UX: Fix various search shortcut UX issues (#31903) · discourse/discourse@832ed8c · GitHub

2 Likes
4

Oh, I hadn’t seen that.. this looks like a proper FIX! :grinning_face_with_smiling_eyes:

However, it doesn’t seem to align the behavior fully.. it works with the new search banner in core enabled. Only the search banner gets focus then.

But the banner from the component, now Advanced Search Banner, doesn’t get focus, the search icon in the header gets it.

And if I install Header Search and enable the core banner, both get focus at the same time:

The image shows a webpage with a search bar and a message that says "Welcome back, nolo!" with placesholders "filters by category or tag" and "filters by topic status" beneath it, along with a circular profile picture and a speech bubble on the right side. (Captioned by AI)
The image shows a webpage with a search bar and a message that says "Welcome back, nolo!" with placesholders "filters by category or tag" and "filters by topic status" beneath it, along with a circular profile picture and a speech bubble on the right side. (Captioned by AI)1125×291 17.2 KB

So there seem to be a lot of combinations now and it’s probably a bit tricky to define a clear focus hierarchy?

1 Like
5

Right, it’s tricky! :sweat_smile:

On a side note, Martin is working on a PR that fixes my issue here and improves a few things. It might help in your context.

https://github.com/discourse/discourse/pull/32099

4 Likes