downshift 5.2.1 → 5.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "downshift",
-  "version": "5.2.1",
+  "version": "5.2.2",
   "description": "A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete components",
   "main": "dist/downshift.cjs.js",
   "react-native": "dist/downshift.native.cjs.js",

package/preact/dist/downshift.cjs.js

@@ -2231,25 +2231,26 @@ function useSelect(userProps) {
 
   var toggleButtonRef = preact.useRef(null);
   var menuRef = preact.useRef(null);
-  var isInitialMount = preact.useRef(true);
-  var shouldScroll = preact.useRef(true);
-  var clearTimeout = preact.useRef(null);
-  var mouseAndTouchTrackers = preact.useRef({
+  var isInitialMountRef = preact.useRef(true);
+  var shouldScrollRef = preact.useRef(true);
+  var shouldBlurRef = preact.useRef(true);
+  var clearTimeoutRef = preact.useRef(null);
+  var mouseAndTouchTrackersRef = preact.useRef({
     isMouseDown: false,
     isTouchMove: false
   });
-  var elementIds = preact.useRef(getElementIds(props));
+  var elementIdsRef = preact.useRef(getElementIds(props));
   var previousResultCountRef = preact.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. */
 
 
   preact.useEffect(function () {
-    if (isInitialMount.current) {
+    if (isInitialMountRef.current) {
       return;
     }
 
@@ -2270,7 +2271,7 @@ function useSelect(userProps) {
   /* Sets a11y status message on changes in selectedItem. */
 
   preact.useEffect(function () {
-    if (isInitialMount.current) {
+    if (isInitialMountRef.current) {
       return;
     }
 
@@ -2292,8 +2293,8 @@ function useSelect(userProps) {
 
   preact.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: ''
@@ -2305,13 +2306,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. */
 
   preact.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();
@@ -2319,13 +2320,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]);
@@ -2336,15 +2347,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]);
   preact.useEffect(function () {
-    if (isInitialMount.current) {
+    if (isInitialMountRef.current) {
       return;
     }
 
@@ -2353,7 +2364,7 @@ function useSelect(userProps) {
   /* Make initial ref false. */
 
   preact.useEffect(function () {
-    isInitialMount.current = false;
+    isInitialMountRef.current = false;
   }, []);
   /* Add mouse/touch events to document. */
 
@@ -2361,11 +2372,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({
@@ -2375,15 +2386,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
         });
@@ -2487,7 +2498,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) {
@@ -2528,7 +2545,7 @@ function useSelect(userProps) {
       return;
     }
 
-    shouldScroll.current = false;
+    shouldScrollRef.current = false;
     dispatch({
       type: ItemMouseMove,
       index: index
@@ -2558,7 +2575,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);
@@ -2569,8 +2586,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) {
@@ -2587,8 +2604,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),
@@ -2612,7 +2629,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/preact/dist/downshift.esm.js

@@ -2225,25 +2225,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;
     }
 
@@ -2264,7 +2265,7 @@ function useSelect(userProps) {
   /* Sets a11y status message on changes in selectedItem. */
 
   useEffect(function () {
-    if (isInitialMount.current) {
+    if (isInitialMountRef.current) {
       return;
     }
 
@@ -2286,8 +2287,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: ''
@@ -2299,13 +2300,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();
@@ -2313,13 +2314,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]);
@@ -2330,15 +2341,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;
     }
 
@@ -2347,7 +2358,7 @@ function useSelect(userProps) {
   /* Make initial ref false. */
 
   useEffect(function () {
-    isInitialMount.current = false;
+    isInitialMountRef.current = false;
   }, []);
   /* Add mouse/touch events to document. */
 
@@ -2355,11 +2366,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({
@@ -2369,15 +2380,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
         });
@@ -2481,7 +2492,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) {
@@ -2522,7 +2539,7 @@ function useSelect(userProps) {
       return;
     }
 
-    shouldScroll.current = false;
+    shouldScrollRef.current = false;
     dispatch({
       type: ItemMouseMove,
       index: index
@@ -2552,7 +2569,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);
@@ -2563,8 +2580,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) {
@@ -2581,8 +2598,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),
@@ -2606,7 +2623,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/preact/dist/downshift.umd.js

@@ -2667,25 +2667,26 @@
 
     var toggleButtonRef = preact.useRef(null);
     var menuRef = preact.useRef(null);
-    var isInitialMount = preact.useRef(true);
-    var shouldScroll = preact.useRef(true);
-    var clearTimeout = preact.useRef(null);
-    var mouseAndTouchTrackers = preact.useRef({
+    var isInitialMountRef = preact.useRef(true);
+    var shouldScrollRef = preact.useRef(true);
+    var shouldBlurRef = preact.useRef(true);
+    var clearTimeoutRef = preact.useRef(null);
+    var mouseAndTouchTrackersRef = preact.useRef({
       isMouseDown: false,
       isTouchMove: false
     });
-    var elementIds = preact.useRef(getElementIds(props));
+    var elementIdsRef = preact.useRef(getElementIds(props));
     var previousResultCountRef = preact.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. */
 
 
     preact.useEffect(function () {
-      if (isInitialMount.current) {
+      if (isInitialMountRef.current) {
         return;
       }
 
@@ -2706,7 +2707,7 @@
     /* Sets a11y status message on changes in selectedItem. */
 
     preact.useEffect(function () {
-      if (isInitialMount.current) {
+      if (isInitialMountRef.current) {
         return;
       }
 
@@ -2728,8 +2729,8 @@
 
     preact.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: ''
@@ -2741,13 +2742,13 @@
         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. */
 
     preact.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();
@@ -2755,13 +2756,23 @@
 
         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]);
@@ -2772,15 +2783,15 @@
         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]);
     preact.useEffect(function () {
-      if (isInitialMount.current) {
+      if (isInitialMountRef.current) {
         return;
       }
 
@@ -2789,7 +2800,7 @@
     /* Make initial ref false. */
 
     preact.useEffect(function () {
-      isInitialMount.current = false;
+      isInitialMountRef.current = false;
     }, []);
     /* Add mouse/touch events to document. */
 
@@ -2797,11 +2808,11 @@
       // 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({
@@ -2811,15 +2822,15 @@
       };
 
       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
           });
@@ -2923,7 +2934,13 @@
     };
 
     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) {
@@ -2964,7 +2981,7 @@
         return;
       }
 
-      shouldScroll.current = false;
+      shouldScrollRef.current = false;
       dispatch({
         type: ItemMouseMove,
         index: index
@@ -2994,7 +3011,7 @@
 
         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);
@@ -3005,8 +3022,8 @@
       },
       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) {
@@ -3023,8 +3040,8 @@
 
         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),
@@ -3048,7 +3065,7 @@
         var itemProps = _extends({
           role: 'option',
           'aria-selected': "" + (itemIndex === highlightedIndex),
-          id: elementIds.current.getItemId(itemIndex)
+          id: elementIdsRef.current.getItemId(itemIndex)
         }, rest);
 
         if (!rest.disabled) {