downshift 5.2.1 → 5.2.2

package/dist/downshift.cjs.js

@@ -2273,25 +2273,26 @@ function useSelect(userProps) {
 
   var toggleButtonRef = react.useRef(null);
   var menuRef = react.useRef(null);
-  var isInitialMount = react.useRef(true);
-  var shouldScroll = react.useRef(true);
-  var clearTimeout = react.useRef(null);
-  var mouseAndTouchTrackers = react.useRef({
+  var isInitialMountRef = react.useRef(true);
+  var shouldScrollRef = react.useRef(true);
+  var shouldBlurRef = react.useRef(true);
+  var clearTimeoutRef = react.useRef(null);
+  var mouseAndTouchTrackersRef = react.useRef({
     isMouseDown: false,
     isTouchMove: false
   });
-  var elementIds = react.useRef(getElementIds(props));
+  var elementIdsRef = react.useRef(getElementIds(props));
   var previousResultCountRef = react.useRef(); // Some utils.
 
   var getItemNodeFromIndex = function (index) {
-    return environment.document.getElementById(elementIds.current.getItemId(index));
+    return environment.document.getElementById(elementIdsRef.current.getItemId(index));
   }; // Effects.
 
   /* Sets a11y status message on changes in state. */
 
 
   react.useEffect(function () {
-    if (isInitialMount.current) {
+    if (isInitialMountRef.current) {
       return;
     }
 
@@ -2312,7 +2313,7 @@ function useSelect(userProps) {
   /* Sets a11y status message on changes in selectedItem. */
 
   react.useEffect(function () {
-    if (isInitialMount.current) {
+    if (isInitialMountRef.current) {
       return;
     }
 
@@ -2334,8 +2335,8 @@ function useSelect(userProps) {
 
   react.useEffect(function () {
     // init the clean function here as we need access to dispatch.
-    if (isInitialMount.current) {
-      clearTimeout.current = debounce(function (outerDispatch) {
+    if (isInitialMountRef.current) {
+      clearTimeoutRef.current = debounce(function (outerDispatch) {
         outerDispatch({
           type: FunctionSetInputValue,
           inputValue: ''
@@ -2347,13 +2348,13 @@ function useSelect(userProps) {
       return;
     }
 
-    clearTimeout.current(dispatch); // eslint-disable-next-line react-hooks/exhaustive-deps
+    clearTimeoutRef.current(dispatch); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [inputValue]);
   /* Controls the focus on the menu or the toggle button. */
 
   react.useEffect(function () {
     // Don't focus menu on first render.
-    if (isInitialMount.current) {
+    if (isInitialMountRef.current) {
       // Unless it was initialised as open.
       if ((initialIsOpen || defaultIsOpen || isOpen) && menuRef.current) {
         menuRef.current.focus();
@@ -2361,13 +2362,23 @@ function useSelect(userProps) {
 
       return;
     } // Focus menu on open.
-    // istanbul ignore next
 
 
-    if (isOpen && menuRef.current) {
-      menuRef.current.focus(); // Focus toggleButton on close.
-    } else if (environment.document.activeElement === menuRef.current && toggleButtonRef.current) {
-      toggleButtonRef.current.focus();
+    if (isOpen) {
+      // istanbul ignore else
+      if (menuRef.current) {
+        menuRef.current.focus();
+        return;
+      }
+    } // Focus toggleButton on close, but on if was closed with (Shift+)Tab.
+
+
+    if (environment.document.activeElement === menuRef.current) {
+      // istanbul ignore else
+      if (toggleButtonRef.current) {
+        shouldBlurRef.current = false;
+        toggleButtonRef.current.focus();
+      }
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [isOpen]);
@@ -2378,15 +2389,15 @@ function useSelect(userProps) {
       return;
     }
 
-    if (shouldScroll.current === false) {
-      shouldScroll.current = true;
+    if (shouldScrollRef.current === false) {
+      shouldScrollRef.current = true;
     } else {
       scrollIntoView(getItemNodeFromIndex(highlightedIndex), menuRef.current);
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [highlightedIndex]);
   react.useEffect(function () {
-    if (isInitialMount.current) {
+    if (isInitialMountRef.current) {
       return;
     }
 
@@ -2395,7 +2406,7 @@ function useSelect(userProps) {
   /* Make initial ref false. */
 
   react.useEffect(function () {
-    isInitialMount.current = false;
+    isInitialMountRef.current = false;
   }, []);
   /* Add mouse/touch events to document. */
 
@@ -2403,11 +2414,11 @@ function useSelect(userProps) {
     // The same strategy for checking if a click occurred inside or outside downsift
     // as in downshift.js.
     var onMouseDown = function () {
-      mouseAndTouchTrackers.current.isMouseDown = true;
+      mouseAndTouchTrackersRef.current.isMouseDown = true;
     };
 
     var onMouseUp = function (event) {
-      mouseAndTouchTrackers.current.isMouseDown = false;
+      mouseAndTouchTrackersRef.current.isMouseDown = false;
 
       if (isOpen && !targetWithinDownshift(event.target, [toggleButtonRef.current, menuRef.current], environment.document)) {
         dispatch({
@@ -2417,15 +2428,15 @@ function useSelect(userProps) {
     };
 
     var onTouchStart = function () {
-      mouseAndTouchTrackers.current.isTouchMove = false;
+      mouseAndTouchTrackersRef.current.isTouchMove = false;
     };
 
     var onTouchMove = function () {
-      mouseAndTouchTrackers.current.isTouchMove = true;
+      mouseAndTouchTrackersRef.current.isTouchMove = true;
     };
 
     var onTouchEnd = function (event) {
-      if (isOpen && !mouseAndTouchTrackers.current.isTouchMove && !targetWithinDownshift(event.target, [toggleButtonRef.current, menuRef.current], environment.document, false)) {
+      if (isOpen && !mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, [toggleButtonRef.current, menuRef.current], environment.document, false)) {
         dispatch({
           type: MenuBlur
         });
@@ -2529,7 +2540,13 @@ function useSelect(userProps) {
   };
 
   var menuHandleBlur = function () {
-    var shouldBlur = !mouseAndTouchTrackers.current.isMouseDown;
+    // if the blur was a result of selection, we don't trigger this action.
+    if (shouldBlurRef.current === false) {
+      shouldBlurRef.current = true;
+      return;
+    }
+
+    var shouldBlur = !mouseAndTouchTrackersRef.current.isMouseDown;
     /* istanbul ignore else */
 
     if (shouldBlur) {
@@ -2570,7 +2587,7 @@ function useSelect(userProps) {
       return;
     }
 
-    shouldScroll.current = false;
+    shouldScrollRef.current = false;
     dispatch({
       type: ItemMouseMove,
       index: index
@@ -2600,7 +2617,7 @@ function useSelect(userProps) {
 
       var toggleProps = _extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (toggleButtonNode) {
         toggleButtonRef.current = toggleButtonNode;
-      }), _extends3.id = elementIds.current.toggleButtonId, _extends3['aria-haspopup'] = 'listbox', _extends3['aria-expanded'] = isOpen, _extends3['aria-labelledby'] = elementIds.current.labelId + " " + elementIds.current.toggleButtonId, _extends3), rest);
+      }), _extends3.id = elementIdsRef.current.toggleButtonId, _extends3['aria-haspopup'] = 'listbox', _extends3['aria-expanded'] = isOpen, _extends3['aria-labelledby'] = elementIdsRef.current.labelId + " " + elementIdsRef.current.toggleButtonId, _extends3), rest);
 
       if (!rest.disabled) {
         toggleProps.onClick = callAllEventHandlers(onClick, toggleButtonHandleClick);
@@ -2611,8 +2628,8 @@ function useSelect(userProps) {
     },
     getLabelProps: function getLabelProps(labelProps) {
       return _extends({
-        id: elementIds.current.labelId,
-        htmlFor: elementIds.current.toggleButtonId
+        id: elementIdsRef.current.labelId,
+        htmlFor: elementIdsRef.current.toggleButtonId
       }, labelProps);
     },
     getMenuProps: function getMenuProps(_temp) {
@@ -2629,8 +2646,8 @@ function useSelect(userProps) {
 
       return _extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (menuNode) {
         menuRef.current = menuNode;
-      }), _extends2.id = elementIds.current.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = elementIds.current.labelId, _extends2.tabIndex = -1, _extends2), isOpen && highlightedIndex > -1 && {
-        'aria-activedescendant': elementIds.current.getItemId(highlightedIndex)
+      }), _extends2.id = elementIdsRef.current.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = elementIdsRef.current.labelId, _extends2.tabIndex = -1, _extends2), isOpen && highlightedIndex > -1 && {
+        'aria-activedescendant': elementIdsRef.current.getItemId(highlightedIndex)
       }, {
         onMouseLeave: callAllEventHandlers(onMouseLeave, menuHandleMouseLeave),
         onKeyDown: callAllEventHandlers(onKeyDown, menuHandleKeyDown),
@@ -2654,7 +2671,7 @@ function useSelect(userProps) {
       var itemProps = _extends({
         role: 'option',
         'aria-selected': "" + (itemIndex === highlightedIndex),
-        id: elementIds.current.getItemId(itemIndex)
+        id: elementIdsRef.current.getItemId(itemIndex)
       }, rest);
 
       if (!rest.disabled) {

package/dist/downshift.esm.js

@@ -2267,25 +2267,26 @@ function useSelect(userProps) {
 
   var toggleButtonRef = useRef(null);
   var menuRef = useRef(null);
-  var isInitialMount = useRef(true);
-  var shouldScroll = useRef(true);
-  var clearTimeout = useRef(null);
-  var mouseAndTouchTrackers = useRef({
+  var isInitialMountRef = useRef(true);
+  var shouldScrollRef = useRef(true);
+  var shouldBlurRef = useRef(true);
+  var clearTimeoutRef = useRef(null);
+  var mouseAndTouchTrackersRef = useRef({
     isMouseDown: false,
     isTouchMove: false
   });
-  var elementIds = useRef(getElementIds(props));
+  var elementIdsRef = useRef(getElementIds(props));
   var previousResultCountRef = useRef(); // Some utils.
 
   var getItemNodeFromIndex = function (index) {
-    return environment.document.getElementById(elementIds.current.getItemId(index));
+    return environment.document.getElementById(elementIdsRef.current.getItemId(index));
   }; // Effects.
 
   /* Sets a11y status message on changes in state. */
 
 
   useEffect(function () {
-    if (isInitialMount.current) {
+    if (isInitialMountRef.current) {
       return;
     }
 
@@ -2306,7 +2307,7 @@ function useSelect(userProps) {
   /* Sets a11y status message on changes in selectedItem. */
 
   useEffect(function () {
-    if (isInitialMount.current) {
+    if (isInitialMountRef.current) {
       return;
     }
 
@@ -2328,8 +2329,8 @@ function useSelect(userProps) {
 
   useEffect(function () {
     // init the clean function here as we need access to dispatch.
-    if (isInitialMount.current) {
-      clearTimeout.current = debounce(function (outerDispatch) {
+    if (isInitialMountRef.current) {
+      clearTimeoutRef.current = debounce(function (outerDispatch) {
         outerDispatch({
           type: FunctionSetInputValue,
           inputValue: ''
@@ -2341,13 +2342,13 @@ function useSelect(userProps) {
       return;
     }
 
-    clearTimeout.current(dispatch); // eslint-disable-next-line react-hooks/exhaustive-deps
+    clearTimeoutRef.current(dispatch); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [inputValue]);
   /* Controls the focus on the menu or the toggle button. */
 
   useEffect(function () {
     // Don't focus menu on first render.
-    if (isInitialMount.current) {
+    if (isInitialMountRef.current) {
       // Unless it was initialised as open.
       if ((initialIsOpen || defaultIsOpen || isOpen) && menuRef.current) {
         menuRef.current.focus();
@@ -2355,13 +2356,23 @@ function useSelect(userProps) {
 
       return;
     } // Focus menu on open.
-    // istanbul ignore next
 
 
-    if (isOpen && menuRef.current) {
-      menuRef.current.focus(); // Focus toggleButton on close.
-    } else if (environment.document.activeElement === menuRef.current && toggleButtonRef.current) {
-      toggleButtonRef.current.focus();
+    if (isOpen) {
+      // istanbul ignore else
+      if (menuRef.current) {
+        menuRef.current.focus();
+        return;
+      }
+    } // Focus toggleButton on close, but on if was closed with (Shift+)Tab.
+
+
+    if (environment.document.activeElement === menuRef.current) {
+      // istanbul ignore else
+      if (toggleButtonRef.current) {
+        shouldBlurRef.current = false;
+        toggleButtonRef.current.focus();
+      }
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [isOpen]);
@@ -2372,15 +2383,15 @@ function useSelect(userProps) {
       return;
     }
 
-    if (shouldScroll.current === false) {
-      shouldScroll.current = true;
+    if (shouldScrollRef.current === false) {
+      shouldScrollRef.current = true;
     } else {
       scrollIntoView(getItemNodeFromIndex(highlightedIndex), menuRef.current);
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [highlightedIndex]);
   useEffect(function () {
-    if (isInitialMount.current) {
+    if (isInitialMountRef.current) {
       return;
     }
 
@@ -2389,7 +2400,7 @@ function useSelect(userProps) {
   /* Make initial ref false. */
 
   useEffect(function () {
-    isInitialMount.current = false;
+    isInitialMountRef.current = false;
   }, []);
   /* Add mouse/touch events to document. */
 
@@ -2397,11 +2408,11 @@ function useSelect(userProps) {
     // The same strategy for checking if a click occurred inside or outside downsift
     // as in downshift.js.
     var onMouseDown = function () {
-      mouseAndTouchTrackers.current.isMouseDown = true;
+      mouseAndTouchTrackersRef.current.isMouseDown = true;
     };
 
     var onMouseUp = function (event) {
-      mouseAndTouchTrackers.current.isMouseDown = false;
+      mouseAndTouchTrackersRef.current.isMouseDown = false;
 
       if (isOpen && !targetWithinDownshift(event.target, [toggleButtonRef.current, menuRef.current], environment.document)) {
         dispatch({
@@ -2411,15 +2422,15 @@ function useSelect(userProps) {
     };
 
     var onTouchStart = function () {
-      mouseAndTouchTrackers.current.isTouchMove = false;
+      mouseAndTouchTrackersRef.current.isTouchMove = false;
     };
 
     var onTouchMove = function () {
-      mouseAndTouchTrackers.current.isTouchMove = true;
+      mouseAndTouchTrackersRef.current.isTouchMove = true;
     };
 
     var onTouchEnd = function (event) {
-      if (isOpen && !mouseAndTouchTrackers.current.isTouchMove && !targetWithinDownshift(event.target, [toggleButtonRef.current, menuRef.current], environment.document, false)) {
+      if (isOpen && !mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, [toggleButtonRef.current, menuRef.current], environment.document, false)) {
         dispatch({
           type: MenuBlur
         });
@@ -2523,7 +2534,13 @@ function useSelect(userProps) {
   };
 
   var menuHandleBlur = function () {
-    var shouldBlur = !mouseAndTouchTrackers.current.isMouseDown;
+    // if the blur was a result of selection, we don't trigger this action.
+    if (shouldBlurRef.current === false) {
+      shouldBlurRef.current = true;
+      return;
+    }
+
+    var shouldBlur = !mouseAndTouchTrackersRef.current.isMouseDown;
     /* istanbul ignore else */
 
     if (shouldBlur) {
@@ -2564,7 +2581,7 @@ function useSelect(userProps) {
       return;
     }
 
-    shouldScroll.current = false;
+    shouldScrollRef.current = false;
     dispatch({
       type: ItemMouseMove,
       index: index
@@ -2594,7 +2611,7 @@ function useSelect(userProps) {
 
       var toggleProps = _extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (toggleButtonNode) {
         toggleButtonRef.current = toggleButtonNode;
-      }), _extends3.id = elementIds.current.toggleButtonId, _extends3['aria-haspopup'] = 'listbox', _extends3['aria-expanded'] = isOpen, _extends3['aria-labelledby'] = elementIds.current.labelId + " " + elementIds.current.toggleButtonId, _extends3), rest);
+      }), _extends3.id = elementIdsRef.current.toggleButtonId, _extends3['aria-haspopup'] = 'listbox', _extends3['aria-expanded'] = isOpen, _extends3['aria-labelledby'] = elementIdsRef.current.labelId + " " + elementIdsRef.current.toggleButtonId, _extends3), rest);
 
       if (!rest.disabled) {
         toggleProps.onClick = callAllEventHandlers(onClick, toggleButtonHandleClick);
@@ -2605,8 +2622,8 @@ function useSelect(userProps) {
     },
     getLabelProps: function getLabelProps(labelProps) {
       return _extends({
-        id: elementIds.current.labelId,
-        htmlFor: elementIds.current.toggleButtonId
+        id: elementIdsRef.current.labelId,
+        htmlFor: elementIdsRef.current.toggleButtonId
       }, labelProps);
     },
     getMenuProps: function getMenuProps(_temp) {
@@ -2623,8 +2640,8 @@ function useSelect(userProps) {
 
       return _extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (menuNode) {
         menuRef.current = menuNode;
-      }), _extends2.id = elementIds.current.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = elementIds.current.labelId, _extends2.tabIndex = -1, _extends2), isOpen && highlightedIndex > -1 && {
-        'aria-activedescendant': elementIds.current.getItemId(highlightedIndex)
+      }), _extends2.id = elementIdsRef.current.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = elementIdsRef.current.labelId, _extends2.tabIndex = -1, _extends2), isOpen && highlightedIndex > -1 && {
+        'aria-activedescendant': elementIdsRef.current.getItemId(highlightedIndex)
       }, {
         onMouseLeave: callAllEventHandlers(onMouseLeave, menuHandleMouseLeave),
         onKeyDown: callAllEventHandlers(onKeyDown, menuHandleKeyDown),
@@ -2648,7 +2665,7 @@ function useSelect(userProps) {
       var itemProps = _extends({
         role: 'option',
         'aria-selected': "" + (itemIndex === highlightedIndex),
-        id: elementIds.current.getItemId(itemIndex)
+        id: elementIdsRef.current.getItemId(itemIndex)
       }, rest);
 
       if (!rest.disabled) {

package/dist/downshift.native.cjs.js

@@ -2206,25 +2206,26 @@ function useSelect(userProps) {
 
   var toggleButtonRef = react.useRef(null);
   var menuRef = react.useRef(null);
-  var isInitialMount = react.useRef(true);
-  var shouldScroll = react.useRef(true);
-  var clearTimeout = react.useRef(null);
-  var mouseAndTouchTrackers = react.useRef({
+  var isInitialMountRef = react.useRef(true);
+  var shouldScrollRef = react.useRef(true);
+  var shouldBlurRef = react.useRef(true);
+  var clearTimeoutRef = react.useRef(null);
+  var mouseAndTouchTrackersRef = react.useRef({
     isMouseDown: false,
     isTouchMove: false
   });
-  var elementIds = react.useRef(getElementIds(props));
+  var elementIdsRef = react.useRef(getElementIds(props));
   var previousResultCountRef = react.useRef(); // Some utils.
 
   var getItemNodeFromIndex = function (index) {
-    return environment.document.getElementById(elementIds.current.getItemId(index));
+    return environment.document.getElementById(elementIdsRef.current.getItemId(index));
   }; // Effects.
 
   /* Sets a11y status message on changes in state. */
 
 
   react.useEffect(function () {
-    if (isInitialMount.current) {
+    if (isInitialMountRef.current) {
       return;
     }
 
@@ -2245,7 +2246,7 @@ function useSelect(userProps) {
   /* Sets a11y status message on changes in selectedItem. */
 
   react.useEffect(function () {
-    if (isInitialMount.current) {
+    if (isInitialMountRef.current) {
       return;
     }
 
@@ -2267,8 +2268,8 @@ function useSelect(userProps) {
 
   react.useEffect(function () {
     // init the clean function here as we need access to dispatch.
-    if (isInitialMount.current) {
-      clearTimeout.current = debounce(function (outerDispatch) {
+    if (isInitialMountRef.current) {
+      clearTimeoutRef.current = debounce(function (outerDispatch) {
         outerDispatch({
           type: FunctionSetInputValue,
           inputValue: ''
@@ -2280,13 +2281,13 @@ function useSelect(userProps) {
       return;
     }
 
-    clearTimeout.current(dispatch); // eslint-disable-next-line react-hooks/exhaustive-deps
+    clearTimeoutRef.current(dispatch); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [inputValue]);
   /* Controls the focus on the menu or the toggle button. */
 
   react.useEffect(function () {
     // Don't focus menu on first render.
-    if (isInitialMount.current) {
+    if (isInitialMountRef.current) {
       // Unless it was initialised as open.
       if ((initialIsOpen || defaultIsOpen || isOpen) && menuRef.current) {
         menuRef.current.focus();
@@ -2294,13 +2295,23 @@ function useSelect(userProps) {
 
       return;
     } // Focus menu on open.
-    // istanbul ignore next
 
 
-    if (isOpen && menuRef.current) {
-      menuRef.current.focus(); // Focus toggleButton on close.
-    } else if (environment.document.activeElement === menuRef.current && toggleButtonRef.current) {
-      toggleButtonRef.current.focus();
+    if (isOpen) {
+      // istanbul ignore else
+      if (menuRef.current) {
+        menuRef.current.focus();
+        return;
+      }
+    } // Focus toggleButton on close, but on if was closed with (Shift+)Tab.
+
+
+    if (environment.document.activeElement === menuRef.current) {
+      // istanbul ignore else
+      if (toggleButtonRef.current) {
+        shouldBlurRef.current = false;
+        toggleButtonRef.current.focus();
+      }
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [isOpen]);
@@ -2311,15 +2322,15 @@ function useSelect(userProps) {
       return;
     }
 
-    if (shouldScroll.current === false) {
-      shouldScroll.current = true;
+    if (shouldScrollRef.current === false) {
+      shouldScrollRef.current = true;
     } else {
       scrollIntoView(getItemNodeFromIndex(highlightedIndex), menuRef.current);
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [highlightedIndex]);
   react.useEffect(function () {
-    if (isInitialMount.current) {
+    if (isInitialMountRef.current) {
       return;
     }
 
@@ -2328,7 +2339,7 @@ function useSelect(userProps) {
   /* Make initial ref false. */
 
   react.useEffect(function () {
-    isInitialMount.current = false;
+    isInitialMountRef.current = false;
   }, []);
   /* Add mouse/touch events to document. */
 
@@ -2336,11 +2347,11 @@ function useSelect(userProps) {
     // The same strategy for checking if a click occurred inside or outside downsift
     // as in downshift.js.
     var onMouseDown = function () {
-      mouseAndTouchTrackers.current.isMouseDown = true;
+      mouseAndTouchTrackersRef.current.isMouseDown = true;
     };
 
     var onMouseUp = function (event) {
-      mouseAndTouchTrackers.current.isMouseDown = false;
+      mouseAndTouchTrackersRef.current.isMouseDown = false;
 
       if (isOpen && !targetWithinDownshift(event.target, [toggleButtonRef.current, menuRef.current], environment.document)) {
         dispatch({
@@ -2350,15 +2361,15 @@ function useSelect(userProps) {
     };
 
     var onTouchStart = function () {
-      mouseAndTouchTrackers.current.isTouchMove = false;
+      mouseAndTouchTrackersRef.current.isTouchMove = false;
     };
 
     var onTouchMove = function () {
-      mouseAndTouchTrackers.current.isTouchMove = true;
+      mouseAndTouchTrackersRef.current.isTouchMove = true;
     };
 
     var onTouchEnd = function (event) {
-      if (isOpen && !mouseAndTouchTrackers.current.isTouchMove && !targetWithinDownshift(event.target, [toggleButtonRef.current, menuRef.current], environment.document, false)) {
+      if (isOpen && !mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, [toggleButtonRef.current, menuRef.current], environment.document, false)) {
         dispatch({
           type: MenuBlur
         });
@@ -2462,7 +2473,13 @@ function useSelect(userProps) {
   };
 
   var menuHandleBlur = function () {
-    var shouldBlur = !mouseAndTouchTrackers.current.isMouseDown;
+    // if the blur was a result of selection, we don't trigger this action.
+    if (shouldBlurRef.current === false) {
+      shouldBlurRef.current = true;
+      return;
+    }
+
+    var shouldBlur = !mouseAndTouchTrackersRef.current.isMouseDown;
     /* istanbul ignore else */
 
     if (shouldBlur) {
@@ -2503,7 +2520,7 @@ function useSelect(userProps) {
       return;
     }
 
-    shouldScroll.current = false;
+    shouldScrollRef.current = false;
     dispatch({
       type: ItemMouseMove,
       index: index
@@ -2533,7 +2550,7 @@ function useSelect(userProps) {
 
       var toggleProps = _extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (toggleButtonNode) {
         toggleButtonRef.current = toggleButtonNode;
-      }), _extends3.id = elementIds.current.toggleButtonId, _extends3['aria-haspopup'] = 'listbox', _extends3['aria-expanded'] = isOpen, _extends3['aria-labelledby'] = elementIds.current.labelId + " " + elementIds.current.toggleButtonId, _extends3), rest);
+      }), _extends3.id = elementIdsRef.current.toggleButtonId, _extends3['aria-haspopup'] = 'listbox', _extends3['aria-expanded'] = isOpen, _extends3['aria-labelledby'] = elementIdsRef.current.labelId + " " + elementIdsRef.current.toggleButtonId, _extends3), rest);
 
       if (!rest.disabled) {
         toggleProps.onClick = callAllEventHandlers(onClick, toggleButtonHandleClick);
@@ -2544,8 +2561,8 @@ function useSelect(userProps) {
     },
     getLabelProps: function getLabelProps(labelProps) {
       return _extends({
-        id: elementIds.current.labelId,
-        htmlFor: elementIds.current.toggleButtonId
+        id: elementIdsRef.current.labelId,
+        htmlFor: elementIdsRef.current.toggleButtonId
       }, labelProps);
     },
     getMenuProps: function getMenuProps(_temp) {
@@ -2562,8 +2579,8 @@ function useSelect(userProps) {
 
       return _extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (menuNode) {
         menuRef.current = menuNode;
-      }), _extends2.id = elementIds.current.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = elementIds.current.labelId, _extends2.tabIndex = -1, _extends2), isOpen && highlightedIndex > -1 && {
-        'aria-activedescendant': elementIds.current.getItemId(highlightedIndex)
+      }), _extends2.id = elementIdsRef.current.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = elementIdsRef.current.labelId, _extends2.tabIndex = -1, _extends2), isOpen && highlightedIndex > -1 && {
+        'aria-activedescendant': elementIdsRef.current.getItemId(highlightedIndex)
       }, {
         onMouseLeave: callAllEventHandlers(onMouseLeave, menuHandleMouseLeave),
         onKeyDown: callAllEventHandlers(onKeyDown, menuHandleKeyDown),
@@ -2587,7 +2604,7 @@ function useSelect(userProps) {
       var itemProps = _extends({
         role: 'option',
         'aria-selected': "" + (itemIndex === highlightedIndex),
-        id: elementIds.current.getItemId(itemIndex)
+        id: elementIdsRef.current.getItemId(itemIndex)
       }, rest);
 
       if (!rest.disabled) {