Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: MenuItem is only focused when mouse cursor is moved #33725

Merged
merged 2 commits into from
Jan 24, 2025

Conversation

ling1726
Copy link
Member

Currently the MenuItem uses onMouseEnter to focus - this causes a nasty side effect where the menu item is focused if the menu opens and hte cursor just happens to be on top of a menuitem.

This PR changes the logic to use onMouseMove which requires the user to explicitly move the cursor inside the menu item

Previous Behavior

menu hover bad

New Behavior

menu hover good

Related Issue(s)

  • Fixes #

Currently the MenuItem uses `onMouseEnter` to focus - this causes a
nasty side effect where the menu item is focused if the menu opens and
hte cursor just happens to be on top of a menuitem.

This PR changes the logic to use `onMouseMove` which requires the user
to explicitly move the cursor inside the menu item
@ling1726 ling1726 marked this pull request as ready for review January 24, 2025 17:31
@ling1726 ling1726 requested a review from a team as a code owner January 24, 2025 17:31
Copy link

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
224.117 kB
64.843 kB
224.18 kB
64.859 kB
63 B
16 B
react-components
react-components: entire library
1.169 MB
292.716 kB
1.169 MB
292.741 kB
63 B
25 B
react-menu
Menu (including children components)
155.553 kB
46.863 kB
155.616 kB
46.882 kB
63 B
19 B
react-menu
Menu (including selectable components)
158.535 kB
47.46 kB
158.598 kB
47.478 kB
63 B
18 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-avatar
Avatar
49.329 kB
15.824 kB
react-avatar
AvatarGroup
20.132 kB
7.976 kB
react-avatar
AvatarGroupItem
63.473 kB
20.043 kB
react-breadcrumb
@fluentui/react-breadcrumb - package
114.317 kB
31.702 kB
react-components
react-components: Button, FluentProvider & webLightTheme
69.236 kB
20.182 kB
react-components
react-components: FluentProvider & webLightTheme
44.473 kB
14.597 kB
react-datepicker-compat
DatePicker Compat
225.344 kB
63.793 kB
react-dialog
Dialog (including children components)
100.513 kB
30.131 kB
react-overflow
hooks only
12.808 kB
4.819 kB
react-persona
Persona
56.22 kB
17.704 kB
react-popover
Popover
130.32 kB
40.699 kB
react-portal-compat
PortalCompatProvider
8.39 kB
2.64 kB
react-table
DataGrid
161.06 kB
45.718 kB
react-table
Table (Primitives only)
42.692 kB
13.862 kB
react-table
Table as DataGrid
131.895 kB
36.579 kB
react-table
Table (Selection only)
70.562 kB
20.007 kB
react-table
Table (Sort only)
69.205 kB
19.618 kB
react-tag-picker
@fluentui/react-tag-picker - package
185.734 kB
55.759 kB
react-tags
InteractionTag
15.225 kB
6.165 kB
react-tags
Tag
29.098 kB
9.559 kB
react-tags
TagGroup
82.745 kB
24.532 kB
react-teaching-popover
TeachingPopover
91.711 kB
27.921 kB
react-timepicker-compat
TimePicker
108.551 kB
36.094 kB
react-tree
FlatTree
147.295 kB
42.271 kB
react-tree
PersonaFlatTree
148.04 kB
42.417 kB
react-tree
PersonaTree
144.249 kB
41.27 kB
react-tree
Tree
143.51 kB
41.149 kB
🤖 This report was generated against ab504b182ef3b6c7594fce9aa91948dac8332dd5

Copy link

Pull request demo site: URL

@ling1726 ling1726 enabled auto-merge (squash) January 24, 2025 17:48
@ling1726 ling1726 merged commit 87d6ba3 into microsoft:master Jan 24, 2025
16 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants