Skip to content

Commit c2fd95a

Browse files
authoredNov 29, 2019
fix(useSelect): fix Firefox menu close on toggleButton click (#837)
* fix close on button click * inverse logic according to fn name * rename function
1 parent fabffff commit c2fd95a

File tree

2 files changed

+28
-5
lines changed

2 files changed

+28
-5
lines changed
 

‎src/hooks/useSelect/index.js

+10-5
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
isAcceptedCharacterKey,
99
useEnhancedReducer,
1010
useId,
11+
focusLandsOnElement,
1112
} from '../utils'
1213
import setStatus from '../../set-a11y-status'
1314
import {
@@ -249,7 +250,7 @@ function useSelect(userProps = {}) {
249250
// We are toggleing special actions for these cases in reducer, not MenuBlur.
250251
// Since Shift-Tab also lands focus on toggleButton, we will handle it as exception and call MenuBlur.
251252
const menuHandleBlur = event => {
252-
if (event.relatedTarget !== toggleButtonRef.current) {
253+
if (!focusLandsOnElement(event, toggleButtonRef.current)) {
253254
dispatch({
254255
type: stateChangeTypes.MenuBlur,
255256
})
@@ -408,14 +409,18 @@ function useSelect(userProps = {}) {
408409
...(itemIndex === highlightedIndex && {'aria-selected': true}),
409410
id: getItemId(itemIndex),
410411
...rest,
411-
};
412+
}
412413

413414
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+
)
416421
}
417422

418-
return itemProps;
423+
return itemProps
419424
}
420425

421426
return {

‎src/hooks/utils.js

+18
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,23 @@ function useId() {
153153
return id
154154
}
155155

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+
156173
export {
157174
getElementIds,
158175
getNextWrappingIndex,
@@ -165,4 +182,5 @@ export {
165182
useEnhancedReducer,
166183
capitalizeString,
167184
useId,
185+
focusLandsOnElement,
168186
}

0 commit comments

Comments
 (0)
Please sign in to comment.