MenuItem: refine highlight behavior
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	AnneT
	Feb 27 2023, 3:19 PM

Description

As part of T327499, we discussed two potential improvements of the highlight behavior of the MenuItem component:

Do not highlight a menu item if the cursor is below the menu when it opens and happens to be on top of a MenuItem. Instead, wait until the user intentionally moves the cursor.
Do not allow double highlighting: currently, you can highlight a MenuItem via the mouse, then use the arrow keys to highlight a second MenuItem. Instead, only a single MenuItem should be highlighted at a time, and it should be the one that the user last interacted with.

This task covers implementing these improvements.

Acceptance criteria

MenuItem is no longer highlighted on menu expansion when the cursor happens to be on top of that MenuItem
Only one MenuItem is ever highlighted at a time, and that item is the one the user last interacted with (either via the mouse or the keyboard)

Details

	Subject	Repo	Branch	Lines +/-
	MenuItem: Change highlight behavior	design/codex	main	+36 -27

Customize query in gerrit

Related Objects

Mentioned In: T327499: Dropdown of Vector 2022 search incorrectly responds to enter
Mentioned Here: T327499: Dropdown of Vector 2022 search incorrectly responds to enter

Event Timeline

AnneT created this task.Feb 27 2023, 3:19 PM

Restricted Application added a project: Design-System-Team. · View Herald TranscriptFeb 27 2023, 3:19 PM

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

AnneT edited projects, added Design-System-Team (Design-System-Sprint); removed Design-System-Team.Feb 27 2023, 3:20 PM

Restricted Application triaged this task as High priority. · View Herald TranscriptFeb 27 2023, 3:20 PM

AnneT moved this task from Committed to In Development on the Design-System-Team (Design-System-Sprint) board.Feb 27 2023, 3:20 PM

AnneT mentioned this in T327499: Dropdown of Vector 2022 search incorrectly responds to enter.Feb 27 2023, 3:26 PM

Change 888799 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] MenuItem: Change highlight behavior

https://gerrit.wikimedia.org/r/888799

gerritbot added a project: Patch-For-Review.Feb 27 2023, 3:36 PM

@alexhollender_WMF @Sarai-WMDE we could use your feedback on this change, if you have a moment!

If you visit the TypeaheadSearch demo based on my open patch, you can see the following changes:

No more double-highlighting

Steps to reproduce:

In the Wikipedia demo, type in a search term
Use your mouse to hover over a menu item.
Then, use an arrow key to move the highlight to a different item.

You will notice that the item you highlighted with your mouse is no longer highlighted, and the item that you navigated to with the arrow key is. Previously, both items would have been highlighted.

You can also test the inverse:

Repeat steps 1-3 above
Then move your mouse over the same menu item you originally hovered over

You'll see that the item you're hovering over becomes highlighted again.

No highlight on unintentional hover

Steps to reproduce:

In the Wikipedia demo, click into the input
Move your mouse below the input (where the menu will eventually open)
Type in a search term so that the menu opens

You'll see that the menu item under your cursor is not immediately highlighted. If you move your mouse, the menu item under it will become highlighted at that time. Previously, the item under your mouse when the menu was opened would be highlighted, even though you didn't really indicate that you meant to hover over it.

Please let me know if you approve of this new behavior, disagree with it, or have any other comments about highlighting behavior! cc @bmartinezcalvo @Volker_E

@AnneT both new behaviors make sense to me and I've checked the patch and they work well.

Change 888799 merged by jenkins-bot:

[design/codex@main] MenuItem: Change highlight behavior

https://gerrit.wikimedia.org/r/888799

Maintenance_bot removed a project: Patch-For-Review.Feb 28 2023, 10:31 PM

AnneT moved this task from Inbox to Planned Component Updates on the Codex board.Mar 1 2023, 4:33 PM

Catrope moved this task from In Development to Design Sign-Off on the Design-System-Team (Design-System-Sprint) board.Mar 4 2023, 1:24 AM

In T330665#8650277, @AnneT wrote:

@alexhollender_WMF @Sarai-WMDE we could use your feedback on this change, if you have a moment!
...
Please let me know if you approve of this new behavior, disagree with it, or have any other comments about highlighting behavior! cc @bmartinezcalvo @Volker_E