| Sarai-WMDE | |
| May 11 2022, 5:46 PM |
| F35283806: image.png | |
| Jun 28 2022, 1:38 PM |
| F35219799: T308170 screencast 2022-06-08.mp4 | |
| Jun 8 2022, 8:52 PM |
| F35204758: Screenshot from 2022-06-03 16-01-53.png | |
| Jun 3 2022, 11:04 PM |
| F35130910: Screenshot 2022-05-11 at 17.57.32.png | |
| May 11 2022, 5:46 PM |
MenuItems display a persistent hover style after the cursor is removed from it. Similarly, if the cursor is removed during mousedown, the MenuItem's active state will persist until mouseup (but the item will not be selected).
MenuItems should lose their highlighted or active state on mouseleave.
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| Menu: Refine `active` binding of default slot | design/codex | main | +11 -10 | |
| MenuItem: Remove highlighted and active styles on mouseleave | design/codex | main | +72 -10 |
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Duplicate | None | T299666 Add TypeaheadSearch component to Codex | |||
| Resolved | Sarai-WMDE | T297025 Add TypeaheadSearch to Codex | |||
| Resolved | • DAbad | T300565 Design and build dropdown Menu component | |||
| Resolved | • EUdoh-WMF | T308170 MenuItems should lose highlighted and active states on mouseleave |
This happens in all cases where there's only one item in a menu. Here's the same issue in the Lookup demo:
The underlying reason is that we highlight a menu item on hover, but we don't then un-highlight it when the mouse leaves the menu. You can see that in menus with multiple items too: if you hover over a few items, then move the mouse out, the item that you hovered last will stay highlighted. (Note that the highlight can also be moved using the arrow keys, it's not just a hover effect.) One way to fix this could be to clear the highlight (=make nothing highlighted) when the mouse leaves the menu.
Change 803610 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):
[design/codex@main] [WIP] MenuItem: Unset highlighted item on mouseleave
+1 for clearing the highlighted item on mouse-leave. The existing TypeaheadSearch behaves like this, as does the native <select>. I've added a WIP patch as a proof-of-concept, check out the demo and let me know what you think of this UX!
Thanks for the patch, Anne! It's great to see the hover style go away on mouse leave in the relevant components. If you all agree, I'd say we can move forward with this?
With the patch the following is the case for me…
The menu highlight remains (with mouse pressed and leaving).
From my UX perspective take, the highlight should be removed completely when mouse pressed and left the item.
@Volker_E Good catch; I've updated my patch to remove the active styles on mouseleave as well
Change 803610 merged by jenkins-bot:
[design/codex@main] MenuItem: Remove highlighted and active styles on mouseleave
Looks great! The only thing that I noticed is that the footer's text keeps displaying an active blue color on mouseleave during mousedown (the problem described by Volker two comments above). These new, consistent active footer styles were introduced by @SimoneThisDot in a recent patch: 805399 (as part of T308273: Apply MenuItem selected styles to Menu footer). Not sure how this fix should be handled or by whom, but let me know in case a separate ticket is needed 🙏🏻
Thanks for catching that, @Sarai-WMDE - I think we should cover that fix as part of this ticket, which can be moved back to Ready for Development.
Change 807584 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):
[design/codex@main] Menu: Refine `active` binding of default slot
Change 807584 merged by jenkins-bot:
[design/codex@main] Menu: Refine `active` binding of default slot
Looking and behaving great! This task and T308273 can now be signed off by design after changes were verified in Safari v15.5, Firefox v101 and Chrome v103 on MacOS Monterey.
