fix: enhance focus handling for search-box components

[louis-bompart]

• Replace the atomic-focus-detector with a focus listener and a guard to ensure the newly focused element is not a child of the SearchBoxWrapper main element.
• Handle cross-window focus switching: if we exit the document during a focus out, we discard the event

https://coveord.atlassian.net/browse/KIT-3299

[fbeaudoincoveo]

LGTM, but I unfortunately don't have an iPhone to test it

[github-actions]

Pull Request Report

PR Title

✅ Title follows the conventional commit spec.

Live demo links

• Storybook

• Playwright report

Bundle Size

File	Old (kb)	New (kb)	Change (%)
case-assist	244.9	244.9	0
commerce	339.5	339.5	0
search	413.1	413.1	0
insight	391.9	391.9	0
product-listing	306.6	306.6	0
product-recommendation	211.2	211.2	0
recommendation	258	258	0
ssr	404.3	404.3	0

SSR Progress

Use case	SSR (#)	CSR (#)	Progress (%)
search	39	44	89
recommendation	0	4	0
product-recommendation	0	10	0
product-listing	0	13	0
case-assist	0	6	0
insight	0	27	0
commerce	0	15	0

Detailed logs

search : buildInteractiveResult
search : buildInteractiveInstantResult
search : buildInteractiveRecentResult
search : buildInteractiveCitation
search : buildGeneratedAnswer
recommendation : missing SSR support
product-recommendation : missing SSR support
product-listing : missing SSR support
case-assist : missing SSR support
insight : missing SSR support
commerce : missing SSR support

[olamothe]

Approved on the condition that we can verify this with iPhone simulator first ;)

[louis-bompart]

Approved on the condition that we can verify this with the iPhone simulator first ;)

The verification has been done ish': I did test with the simulator, but I suspect it didn't test and that there's no way to actually test the behaviour of KIT-1941 without an actual physical device.

[louis-bompart]

KIT-3157

[louis-bompart]

@lvu285 , can you validate KIT-3299, and a round of testing on focus behavior of the Searchboxes?

You can use the Storybook link that's here #4027 (comment) and use the Searchbox stories if you prefer :)

What I tested so far:

• Type some stuff, tab, ensure it closes
• Click in searchbox, Alt-Tab, Assert suggestions stays, Alt-Tab back in, Assert suggestions stays and do not flicker.
• Click in searchbox, click out of window, assert suggestions stays, click back in on the searchbox input, assert suggestions stays
• Click in searchbox, click out of window, assert suggestions stays, click back not on searchbox input, assert suggestions collapses
• Focus searchbox, click somewhere else in the page, ensure it closes

[lvu285]

It looks ok for me on Storybook, but I'm curious how it would interact with other components too.

[louis-bompart]

It looks ok for me on Storybook, but I'm curious how it would interact with other components too.

Feel free to checkout the branch and run the examples on your machine (yeah, we'll add'em eventually to the demo links :) baby steps :D )