File tree Expand file tree Collapse file tree 5 files changed +12
-20
lines changed
packages/react-core/src/components Expand file tree Collapse file tree 5 files changed +12
-20
lines changed Original file line number Diff line number Diff line change @@ -114,20 +114,18 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
114
114
) {
115
115
if ( onOpenChangeKeys . includes ( event . key ) ) {
116
116
onOpenChange ( false ) ;
117
- toggleRef . current ?. focus ( ) ;
117
+ toggleRef . current ?. focus ( { preventScroll : true } ) ;
118
118
}
119
119
}
120
120
} ;
121
121
122
122
const handleClick = ( event : MouseEvent ) => {
123
123
// toggle was opened, focus on first menu item
124
124
if ( isOpen && shouldFocusFirstItemOnOpen && toggleRef . current ?. contains ( event . target as Node ) ) {
125
- setTimeout ( ( ) => {
126
125
const firstElement = menuRef ?. current ?. querySelector (
127
126
'li button:not(:disabled),li input:not(:disabled),li a:not([aria-disabled="true"])'
128
127
) ;
129
- firstElement && ( firstElement as HTMLElement ) . focus ( ) ;
130
- } , 10 ) ;
128
+ firstElement && ( firstElement as HTMLElement ) . focus ( { preventScroll :true } ) ;
131
129
}
132
130
133
131
// If the event is not on the toggle and onOpenChange callback is provided, close the menu
@@ -155,7 +153,7 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
155
153
ref = { menuRef }
156
154
onSelect = { ( event , value ) => {
157
155
onSelect && onSelect ( event , value ) ;
158
- shouldFocusToggleOnSelect && toggleRef . current . focus ( ) ;
156
+ shouldFocusToggleOnSelect && toggleRef . current ? .focus ( ) ;
159
157
} }
160
158
isPlain = { isPlain }
161
159
isScrollable = { scrollable }
Original file line number Diff line number Diff line change @@ -63,20 +63,18 @@ export const MenuContainer: React.FunctionComponent<MenuContainerProps> = ({
63
63
) {
64
64
if ( onOpenChangeKeys . includes ( event . key ) ) {
65
65
onOpenChange ( false ) ;
66
- toggleRef . current ?. focus ( ) ;
66
+ toggleRef . current ?. focus ( { preventScroll : true } ) ;
67
67
}
68
68
}
69
69
} ;
70
70
71
71
const handleClick = ( event : MouseEvent ) => {
72
72
// toggle was opened, focus on first menu item
73
73
if ( isOpen && toggleRef . current ?. contains ( event . target as Node ) ) {
74
- setTimeout ( ( ) => {
75
74
const firstElement = menuRef ?. current ?. querySelector (
76
75
'li button:not(:disabled),li input:not(:disabled),li a:not([aria-disabled="true"])'
77
76
) ;
78
- firstElement && ( firstElement as HTMLElement ) . focus ( ) ;
79
- } , 0 ) ;
77
+ firstElement && ( firstElement as HTMLElement ) . focus ( { preventScroll :true } ) ;
80
78
}
81
79
82
80
// If the event is not on the toggle and onOpenChange callback is provided, close the menu
Original file line number Diff line number Diff line change @@ -123,18 +123,16 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
123
123
) {
124
124
if ( event . key === 'Escape' || event . key === 'Tab' ) {
125
125
setIsOpen ( false ) ;
126
- toggleRef . current ?. focus ( ) ;
126
+ toggleRef . current ?. focus ( { preventScroll : true } ) ;
127
127
}
128
128
}
129
129
} ;
130
130
131
131
const handleClick = ( event : MouseEvent ) => {
132
132
// Focus the first non-disabled menu item on toggle 'click'
133
133
if ( isOpen && toggleRef . current ?. contains ( event . target as Node ) ) {
134
- setTimeout ( ( ) => {
135
134
const firstElement = menuRef ?. current ?. querySelector ( 'li button:not(:disabled)' ) ;
136
- firstElement && ( firstElement as HTMLElement ) . focus ( ) ;
137
- } , 0 ) ;
135
+ firstElement && ( firstElement as HTMLElement ) . focus ( { preventScroll :true } ) ;
138
136
}
139
137
140
138
// If the event is not on the toggle, close the menu
Original file line number Diff line number Diff line change @@ -121,18 +121,16 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
121
121
if ( onOpenChangeKeys . includes ( event . key ) ) {
122
122
event . preventDefault ( ) ;
123
123
onOpenChange ( false ) ;
124
- toggleRef . current ?. focus ( ) ;
124
+ toggleRef . current ?. focus ( { preventScroll : true } ) ;
125
125
}
126
126
}
127
127
} ;
128
128
129
129
const handleClick = ( event : MouseEvent ) => {
130
130
// toggle was opened, focus on first menu item
131
131
if ( isOpen && shouldFocusFirstItemOnOpen && toggleRef . current ?. contains ( event . target as Node ) ) {
132
- setTimeout ( ( ) => {
133
132
const firstElement = menuRef ?. current ?. querySelector ( 'li button:not(:disabled),li input:not(:disabled)' ) ;
134
- firstElement && ( firstElement as HTMLElement ) . focus ( ) ;
135
- } , 10 ) ;
133
+ firstElement && ( firstElement as HTMLElement ) . focus ( { preventScroll :true } ) ;
136
134
}
137
135
138
136
// If the event is not on the toggle and onOpenChange callback is provided, close the menu
Original file line number Diff line number Diff line change @@ -75,12 +75,12 @@ export const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({
75
75
76
76
const toggleMenu = ( ) => {
77
77
setIsExpanded ( ( prevIsExpanded ) => ! prevIsExpanded ) ;
78
- setTimeout ( ( ) => {
78
+
79
79
if ( menuRef ?. current ) {
80
80
const firstElement = menuRef . current . querySelector ( 'li > button,input:not(:disabled)' ) ;
81
- firstElement && ( firstElement as HTMLElement ) . focus ( ) ;
81
+ firstElement && ( firstElement as HTMLElement ) . focus ( { preventScroll : true } ) ;
82
82
}
83
- } , 0 ) ;
83
+
84
84
} ;
85
85
86
86
const overflowTab = (
You can’t perform that action at this time.
0 commit comments