fix: prevent redirect on dropdown item clicks

[mkouzel-yext]

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).

This change converts the DropdownItem component from an a element to a button element. This is in line with best practices, 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

[github-actions]

Current unit coverage is 89.67687788501888%
Current visual coverage is 70.37849698299506%
Current combined coverage is 92.79538904899135%

[coveralls]

coverage: 85.188% (+0.03%) from 85.161%
when pulling 686ff1c on prevent-redirect-on-dropdown-click
into cf4ac71 on main.

[Copilot]

Pull request overview

Fixes a UI bug where clicking a DropdownItem (rendered as an <a href="#">) can trigger an unintended navigation/redirect in the Storm VLE, freezing the Locator component.

Changes:

• Prevent default anchor navigation on DropdownItem click by calling e.preventDefault().
• Update test-site lockfile to reference @yext/search-ui-react version 2.0.4.
• Minor formatting/whitespace adjustments in the test-site LocationsPage.

Reviewed changes

Copilot reviewed 1 out of 4 changed files in this pull request and generated 1 comment.

File	Description
src/components/Dropdown/DropdownItem.tsx	Prevents default anchor click behavior to avoid redirect/navigation side effects.
test-site/package-lock.json	Updates the linked workspace package version to 2.0.4.
test-site/src/pages/LocationsPage.tsx	Minor formatting-only changes.

Files not reviewed (1)

• test-site/package-lock.json: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[k-gerner]

Just to confirm, does this change any actual behavior with regular experiences?

[mkouzel-yext]

Just to confirm, does this change any actual behavior with regular experiences?

I've changed the approach since this comment, but feel it's still worth answering. The following changes apply at large:

1. Focusing now applies focusedOption CSS (default bg-gray-100) correctly to dropdown results for FilterSearch component
2. As a side effect of (1), the first FilterSearch result will be focused by default. This is the intended behavior.
3. Hovering now applies the same CSS as focusing. Previously it simply always applied bg-gray-100

I also updated the test-site LocationsPage to make the dropdown background red so that it's easier to see if the focusing & hovering behavior diverges.

[Copilot]

Pull request overview

Copilot reviewed 3 out of 7 changed files in this pull request and generated 2 comments.

Files not reviewed (1)

• test-site/package-lock.json: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[mkouzel-yext]

Upon further consideration, I removed change (3) from my previous comment to avoid changing existing behavior. Hovering will always apply bg-gray-100, like it has in the past.

[k-gerner]

Based off of the snapshot diffs, it looks like the "selected" item is not showing as having a grey background

[mkouzel-yext]

Based off of the snapshot diffs, it looks like the "selected" item is not showing as having a grey background

Sorry if I'm misunderstanding, but I'm seeing the grey background show up for the new snapshots - it's the old snapshots that are missing the grey background. Which snapshots are you referring to?

.storybook/snapshots/__snapshots__/filtersearch--dropdown-sectioned.png

.storybook/snapshots/__snapshots__/filtersearch--dropdown-unsectioned.png

[k-gerner]

Sorry if I'm misunderstanding, but I'm seeing the grey background show up for the new snapshots - it's the old snapshots that are missing the grey background. Which snapshots are you referring to?

Ah whoops, I was viewing in "Onion Skin" mode and got them flipped