yext / search-ui-react / 21914941921

85%

push

github

fix: prevent redirect on dropdown item clicks (#627)

The DropdownItem component currently uses an anchor element with href="#". In the VLE in Storm, if the DropdownItem is clicked, the page tries to call another endpoint, causing the Locator component to get frozen ([relevant slack thread](https://yext.slack.com/archives/C0A1G447MPD/p1770309810738039?thread_ts=1770309450.749689&cid=C0A1G447MPD)). 

This change converts the DropdownItem component from an `a` element to a `button` element. This is in line with [best practices](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#onclick_events), as `a` should only be used for navigation to a real URL rather than triggering JS. 

This PR also aligns handling for focusing and for hovering over dropdown results. Note that focusing happens by toggling different results with arrow keys, whereas hovering happens by moving the mouse on top of results. We want styling changes to be the same for focusing and hovering.

https://yext.atlassian.net/browse/WAT-5384

Before:https://jam.dev/c/51ec9a97-bf37-485f-a6a1-14b8c98e7a76 (note that CSS is not changing properly when focusing on different results)
After:https://jam.dev/c/92938750-9cb1-46d0-9b60-f12d9c9984e6

1007 of 1399 branches covered (71.98%)

Branch coverage included in aggregate %.

3 of 3 new or added lines in 1 file covered. (100.0%)

2254 of 2429 relevant lines covered (92.8%)

149.37 hits per line