fix(useSelect): fix Firefox menu close on toggleButton click (#837)

* fix close on button click

* inverse logic according to fn name

* rename function

Author: silviuaavram

src/hooks/useSelect/index.js

@@ -8,6 +8,7 @@ import {
   isAcceptedCharacterKey,
   useEnhancedReducer,
   useId,
+  focusLandsOnElement,
 } from '../utils'
 import setStatus from '../../set-a11y-status'
 import {
@@ -249,7 +250,7 @@ function useSelect(userProps = {}) {
   // We are toggleing special actions for these cases in reducer, not MenuBlur.
   // Since Shift-Tab also lands focus on toggleButton, we will handle it as exception and call MenuBlur.
   const menuHandleBlur = event => {
-    if (event.relatedTarget !== toggleButtonRef.current) {
+    if (!focusLandsOnElement(event, toggleButtonRef.current)) {
       dispatch({
         type: stateChangeTypes.MenuBlur,
       })
@@ -408,14 +409,18 @@ function useSelect(userProps = {}) {
       ...(itemIndex === highlightedIndex && {'aria-selected': true}),
       id: getItemId(itemIndex),
       ...rest,
-    };
+    }
 
     if (!rest.disabled) {
-      itemProps.onMouseMove = callAllEventHandlers(onMouseMove, () =>itemHandleMouseMove(itemIndex))
-      itemProps.onClick = callAllEventHandlers(onClick, () => itemHandleClick(itemIndex))
+      itemProps.onMouseMove = callAllEventHandlers(onMouseMove, () =>
+        itemHandleMouseMove(itemIndex),
+      )
+      itemProps.onClick = callAllEventHandlers(onClick, () =>
+        itemHandleClick(itemIndex),
+      )
     }
 
-    return itemProps;
+    return itemProps
   }
 
   return {

src/hooks/utils.js

@@ -153,6 +153,23 @@ function useId() {
   return id
 }
 
+/**
+ * Checks if nextElement receives focus after the blur event.
+ *
+ * @param {FocusEvent} event The blur event.
+ * @param {Element} nextElement The element to check that receive focus next.
+ * @returns {boolean} If the focus lands on nextElement.
+ */
+function focusLandsOnElement(event, nextElement) {
+  return (
+    event.relatedTarget === nextElement ||
+    // https://github.com/downshift-js/downshift/issues/832 - workaround for Firefox.
+    (event.nativeEvent &&
+      (nextElement === event.nativeEvent.explicitOriginalTarget ||
+        nextElement.contains(event.nativeEvent.explicitOriginalTarget)))
+  )
+}
+
 export {
   getElementIds,
   getNextWrappingIndex,
@@ -165,4 +182,5 @@ export {
   useEnhancedReducer,
   capitalizeString,
   useId,
+  focusLandsOnElement,
 }