Commit c2fd95a authored Nov 29, 2019 Verified
1 parent fabffff commit c2fd95a Copy full SHA for c2fd95a
File tree 2 files changed +28
-5
lines changed
2 files changed +28
-5
lines changed Original file line number Diff line number Diff line change 8
8
isAcceptedCharacterKey ,
9
9
useEnhancedReducer ,
10
10
useId ,
11
+ focusLandsOnElement ,
11
12
} from '../utils'
12
13
import setStatus from '../../set-a11y-status'
13
14
import {
@@ -249,7 +250,7 @@ function useSelect(userProps = {}) {
249
250
// We are toggleing special actions for these cases in reducer, not MenuBlur.
250
251
// Since Shift-Tab also lands focus on toggleButton, we will handle it as exception and call MenuBlur.
251
252
const menuHandleBlur = event => {
252
- if ( event . relatedTarget !== toggleButtonRef . current ) {
253
+ if ( ! focusLandsOnElement ( event , toggleButtonRef . current ) ) {
253
254
dispatch ( {
254
255
type : stateChangeTypes . MenuBlur ,
255
256
} )
@@ -408,14 +409,18 @@ function useSelect(userProps = {}) {
408
409
...( itemIndex === highlightedIndex && { 'aria-selected' : true } ) ,
409
410
id : getItemId ( itemIndex ) ,
410
411
...rest ,
411
- } ;
412
+ }
412
413
413
414
if ( ! rest . disabled ) {
414
- itemProps . onMouseMove = callAllEventHandlers ( onMouseMove , ( ) => itemHandleMouseMove ( itemIndex ) )
415
- itemProps . onClick = callAllEventHandlers ( onClick , ( ) => itemHandleClick ( itemIndex ) )
415
+ itemProps . onMouseMove = callAllEventHandlers ( onMouseMove , ( ) =>
416
+ itemHandleMouseMove ( itemIndex ) ,
417
+ )
418
+ itemProps . onClick = callAllEventHandlers ( onClick , ( ) =>
419
+ itemHandleClick ( itemIndex ) ,
420
+ )
416
421
}
417
422
418
- return itemProps ;
423
+ return itemProps
419
424
}
420
425
421
426
return {
Original file line number Diff line number Diff line change @@ -153,6 +153,23 @@ function useId() {
153
153
return id
154
154
}
155
155
156
+ /**
157
+ * Checks if nextElement receives focus after the blur event.
158
+ *
159
+ * @param {FocusEvent } event The blur event.
160
+ * @param {Element } nextElement The element to check that receive focus next.
161
+ * @returns {boolean } If the focus lands on nextElement.
162
+ */
163
+ function focusLandsOnElement ( event , nextElement ) {
164
+ return (
165
+ event . relatedTarget === nextElement ||
166
+ // https://github.com/downshift-js/downshift/issues/832 - workaround for Firefox.
167
+ ( event . nativeEvent &&
168
+ ( nextElement === event . nativeEvent . explicitOriginalTarget ||
169
+ nextElement . contains ( event . nativeEvent . explicitOriginalTarget ) ) )
170
+ )
171
+ }
172
+
156
173
export {
157
174
getElementIds ,
158
175
getNextWrappingIndex ,
@@ -165,4 +182,5 @@ export {
165
182
useEnhancedReducer ,
166
183
capitalizeString ,
167
184
useId ,
185
+ focusLandsOnElement ,
168
186
}
You can’t perform that action at this time.
0 commit comments