downshift 5.2.1 → 5.2.2

package/dist/downshift.umd.js

@@ -3543,25 +3543,26 @@
 
     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;
       }
 
@@ -3582,7 +3583,7 @@
     /* Sets a11y status message on changes in selectedItem. */
 
     react.useEffect(function () {
-      if (isInitialMount.current) {
+      if (isInitialMountRef.current) {
         return;
       }
 
@@ -3604,8 +3605,8 @@
 
     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: ''
@@ -3617,13 +3618,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. */
 
     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();
@@ -3631,13 +3632,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]);
@@ -3648,15 +3659,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]);
     react.useEffect(function () {
-      if (isInitialMount.current) {
+      if (isInitialMountRef.current) {
         return;
       }
 
@@ -3665,7 +3676,7 @@
     /* Make initial ref false. */
 
     react.useEffect(function () {
-      isInitialMount.current = false;
+      isInitialMountRef.current = false;
     }, []);
     /* Add mouse/touch events to document. */
 
@@ -3673,11 +3684,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({
@@ -3687,15 +3698,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
           });
@@ -3799,7 +3810,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) {
@@ -3840,7 +3857,7 @@
         return;
       }
 
-      shouldScroll.current = false;
+      shouldScrollRef.current = false;
       dispatch({
         type: ItemMouseMove,
         index: index
@@ -3870,7 +3887,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);
@@ -3881,8 +3898,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) {
@@ -3899,8 +3916,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),
@@ -3924,7 +3941,7 @@
         var itemProps = _extends({
           role: 'option',
           'aria-selected': "" + (itemIndex === highlightedIndex),
-          id: elementIds.current.getItemId(itemIndex)
+          id: elementIdsRef.current.getItemId(itemIndex)
         }, rest);
 
         if (!rest.disabled) {