downshift 9.0.10 → 9.0.12

package/README.md

@@ -1093,7 +1093,7 @@ platforms:
 > 🚨 We're in the process of moving all examples to the
 > [downshift-examples](https://github.com/downshift-js/downshift-examples) repo
 > (which you can open, interact with, and contribute back to live on
-> [codesandbox](https://codesandbox.io/s/github/kentcdodds/downshift-examples))
+> [codesandbox](https://codesandbox.io/p/sandbox/github/kentcdodds/downshift-examples?file=%2Fsrc%2Findex.js&moduleview=1))
 
 > 🚨 We're also in the process of updating our examples from the
 > [downshift-docs](https://github.com/downshift-js/downshift-docs) repo which is
@@ -1105,18 +1105,18 @@ platforms:
 
 If you're just learning downshift, review these in order:
 
-0.  [basic automplete with getRootProps](https://codesandbox.io/s/github/kentcdodds/downshift-examples?file=/src/downshift/ordered-examples/00-get-root-props-example.js) -
+0.  [basic automplete with getRootProps](https://codesandbox.io/p/sandbox/github/kentcdodds/downshift-examples?file=%2Fsrc%2Fdownshift%2Fordered-examples%2F00-get-root-props-example.js%3A11%2C21&moduleview=1) -
     the same as example #1 but using the correct HTML structure as suggested by
     ARIA-WCAG.
-1.  [basic autocomplete](https://codesandbox.io/s/github/kentcdodds/downshift-examples/tree/master/?module=%2Fsrc%2Fordered-examples%2F01-basic-autocomplete.js&moduleview=1) -
+1.  [basic autocomplete](https://codesandbox.io/p/sandbox/github/kentcdodds/downshift-examples?file=%2Fsrc%2Fdownshift%2Fordered-examples%2F01-basic-autocomplete.js&moduleview=1) -
     very bare bones, not styled at all. Good place to start.
-2.  [styled autocomplete](https://codesandbox.io/s/github/kentcdodds/downshift-examples/tree/master/?module=%2Fsrc%2Fordered-examples%2F02-complete-autocomplete.js&moduleview=1) -
+2.  [styled autocomplete](https://codesandbox.io/p/sandbox/github/kentcdodds/downshift-examples?file=%2Fsrc%2Fdownshift%2Fordered-examples%2F02-complete-autocomplete.js&moduleview=1) -
     more complete autocomplete solution using emotion for styling and
     match-sorter for filtering the items.
-3.  [typeahead](https://codesandbox.io/s/github/kentcdodds/downshift-examples/tree/master/?module=%2Fsrc%2Fordered-examples%2F03-typeahead.js&moduleview=1) -
+3.  [typeahead](https://codesandbox.io/p/sandbox/github/kentcdodds/downshift-examples?file=%2Fsrc%2Fdownshift%2Fordered-examples%2F03-typeahead.js&moduleview=1) -
     Shows how to control the `selectedItem` so the selected item can be one of
     your items or whatever the user types.
-4.  [multi-select](https://codesandbox.io/s/github/kentcdodds/downshift-examples/tree/master/?module=%2Fsrc%2Fordered-examples%2F04-multi-select.js&moduleview=1) -
+4.  [multi-select](https://codesandbox.io/p/sandbox/github/kentcdodds/downshift-examples?file=%2Fsrc%2Fdownshift%2Fordered-examples%2F04-multi-select.js&moduleview=1) -
     Shows how to create a MultiDownshift component that allows for an array of
     selectedItems for multiple selection using a state reducer
 
@@ -1124,16 +1124,16 @@ If you're just learning downshift, review these in order:
 
 Check out these examples of more advanced use/edge cases:
 
-- [dropdown with select by key](https://codesandbox.io/s/github/kentcdodds/downshift-examples/tree/master/?module=%2Fsrc%2Fother-examples%2Fdropdown-select-by-key%2FCustomDropdown%2Findex.js) -
+- [dropdown with select by key](https://codesandbox.io/p/sandbox/github/kentcdodds/downshift-examples?file=%2Fsrc%2Fdownshift%2Fother-examples%2Fdropdown-select-by-key%2FCustomDropdown%2Findex.js&moduleview=1) -
   An example of using the render prop pattern to utilize a reusable component to
   provide the downshift dropdown component with the functionality of being able
   to highlight a selection item that starts with the key pressed.
-- [using actions](https://codesandbox.io/s/github/kentcdodds/downshift-examples/tree/master/?module=%2Fsrc%2Fother-examples%2Fusing-actions.js&moduleview=1) -
+- [using actions](https://codesandbox.io/p/sandbox/github/kentcdodds/downshift-examples?file=%2Fsrc%2Fdownshift%2Fother-examples%2Fusing-actions.js&moduleview=1) -
   An example of using one of downshift's actions as an event handler.
-- [gmail's composition recipients field](https://codesandbox.io/s/github/kentcdodds/downshift-examples/tree/master/?module=%2Fsrc%2Fother-examples%2Fgmail%2Findex.js&moduleview=1) -
+- [gmail's composition recipients field](https://codesandbox.io/p/sandbox/github/kentcdodds/downshift-examples?file=%2Fsrc%2Fdownshift%2Fother-examples%2Fgmail%2Findex.js&moduleview=1) -
   An example of a highly complex autocomplete component featuring asynchronously
   loading items, multiple selection, and windowing (with react-virtualized)
-- [Downshift HOC and Compound Components](https://codesandbox.io/s/github/kentcdodds/downshift-examples/tree/master/?module=%2Fsrc%2Fother-examples%2Fhoc%2Findex.js&moduleview=1) -
+- [Downshift HOC and Compound Components](https://codesandbox.io/p/sandbox/github/kentcdodds/downshift-examples?file=%2Fsrc%2Fdownshift%2Fother-examples%2Fhoc%2Findex.js&moduleview=1) -
   An example of how to implementat compound components with
   `React.createContext` and a downshift higher order component. This is
   generally not recommended because the render prop API exported by downshift is
@@ -1144,7 +1144,7 @@ Check out these examples of more advanced use/edge cases:
 
 _🚨 This is a great contribution opportunity!_ These are examples that have not
 yet been migrated to
-[downshift-examples](https://codesandbox.io/s/github/kentcdodds/downshift-examples).
+[downshift-examples](https://codesandbox.io/p/sandbox/github/kentcdodds/downshift-examples?file=%2Fsrc%2Findex.js&moduleview=1).
 You're more than welcome to make PRs to the examples repository to move these
 examples over there.
 [Watch this to learn how to contribute completely in the browser](https://www.youtube.com/watch?v=3PAQbhdkTtI&index=2&t=21s&list=PLV5CVI1eNcJgCrPH_e6d57KRUTiDZgs0u)
@@ -1526,8 +1526,8 @@ MIT
   https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
 [docsite]: https://downshift-js.com/
 [code-sandbox-try-it-out]:
-  https://codesandbox.io/s/github/kentcdodds/downshift-examples?file=/src/downshift/ordered-examples/00-get-root-props-example.js
+  https://codesandbox.io/p/sandbox/github/kentcdodds/downshift-examples?file=%2Fsrc%2Fdownshift%2Fordered-examples%2F00-get-root-props-example.js&moduleview=1
 [code-sandbox-no-get-root-props]:
-  https://codesandbox.io/s/github/kentcdodds/downshift-examples?file=/src/downshift/ordered-examples/01-basic-autocomplete.js
+  https://codesandbox.io/p/sandbox/github/kentcdodds/downshift-examples?file=%2Fsrc%2Fdownshift%2Fordered-examples%2F01-basic-autocomplete.js&moduleview=1
 [migration-guide-v7]:
   https://github.com/downshift-js/downshift/tree/master/src/hooks/MIGRATION_V7.md

package/dist/downshift.cjs.js

@@ -1616,16 +1616,18 @@ var useElementIds = 'useId' in React // Avoid conditional useId call
   if (!id) {
     id = reactId;
   }
-  var elementIdsRef = React.useRef({
-    labelId: labelId || id + "-label",
-    menuId: menuId || id + "-menu",
-    getItemId: getItemId || function (index) {
-      return id + "-item-" + index;
-    },
-    toggleButtonId: toggleButtonId || id + "-toggle-button",
-    inputId: inputId || id + "-input"
-  });
-  return elementIdsRef.current;
+  var elementIds = React.useMemo(function () {
+    return {
+      labelId: labelId || id + "-label",
+      menuId: menuId || id + "-menu",
+      getItemId: getItemId || function (index) {
+        return id + "-item-" + index;
+      },
+      toggleButtonId: toggleButtonId || id + "-toggle-button",
+      inputId: inputId || id + "-input"
+    };
+  }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
+  return elementIds;
 } : function useElementIds(_ref2) {
   var _ref2$id = _ref2.id,
     id = _ref2$id === void 0 ? "downshift-" + generateId() : _ref2$id,
@@ -1634,16 +1636,18 @@ var useElementIds = 'useId' in React // Avoid conditional useId call
     getItemId = _ref2.getItemId,
     toggleButtonId = _ref2.toggleButtonId,
     inputId = _ref2.inputId;
-  var elementIdsRef = React.useRef({
-    labelId: labelId || id + "-label",
-    menuId: menuId || id + "-menu",
-    getItemId: getItemId || function (index) {
-      return id + "-item-" + index;
-    },
-    toggleButtonId: toggleButtonId || id + "-toggle-button",
-    inputId: inputId || id + "-input"
-  });
-  return elementIdsRef.current;
+  var elementIds = React.useMemo(function () {
+    return {
+      labelId: labelId || id + "-label",
+      menuId: menuId || id + "-menu",
+      getItemId: getItemId || function (index) {
+        return id + "-item-" + index;
+      },
+      toggleButtonId: toggleButtonId || id + "-toggle-button",
+      inputId: inputId || id + "-input"
+    };
+  }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
+  return elementIds;
 };
 function getItemAndIndex(itemProp, indexProp, items, errorMessage) {
   var item, index;
@@ -1832,20 +1836,24 @@ function useMouseAndTouchTracker(environment, handleBlur, downshiftElementsRefs)
     isTouchMove: false,
     isTouchEnd: false
   });
+
+  // the elements should be retrieved the moment they are required because these are refs - they can be mutated
+  function getDownshiftElements() {
+    return downshiftElementsRefs.map(function (ref) {
+      return ref.current;
+    });
+  }
   React.useEffect(function () {
     if (!environment) {
       return noop;
     }
-    var downshiftElements = downshiftElementsRefs.map(function (ref) {
-      return ref.current;
-    });
     function onMouseDown() {
       mouseAndTouchTrackersRef.current.isTouchEnd = false; // reset this one.
       mouseAndTouchTrackersRef.current.isMouseDown = true;
     }
     function onMouseUp(event) {
       mouseAndTouchTrackersRef.current.isMouseDown = false;
-      if (!targetWithinDownshift(event.target, downshiftElements, environment)) {
+      if (!targetWithinDownshift(event.target, getDownshiftElements(), environment)) {
         handleBlur();
       }
     }
@@ -1858,7 +1866,7 @@ function useMouseAndTouchTracker(environment, handleBlur, downshiftElementsRefs)
     }
     function onTouchEnd(event) {
       mouseAndTouchTrackersRef.current.isTouchEnd = true;
-      if (!mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElements, environment, false)) {
+      if (!mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, getDownshiftElements(), environment, false)) {
         handleBlur();
       }
     }
@@ -2470,7 +2478,9 @@ function useSelect(userProps) {
     }
   }, [dispatch, latest]), React.useMemo(function () {
     return [menuRef, toggleButtonRef];
-  }, [menuRef.current, toggleButtonRef.current]));
+  },
+  // dependencies can be left empty because refs are getting mutated
+  []));
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps');
   // Reset itemRefs on close.
   React.useEffect(function () {
@@ -3092,7 +3102,9 @@ function useCombobox(userProps) {
     }
   }, [dispatch, latest]), React.useMemo(function () {
     return [menuRef, toggleButtonRef, inputRef];
-  }, [menuRef.current, toggleButtonRef.current, inputRef.current]));
+  },
+  // dependencies can be left empty because refs are getting mutated
+  []));
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getMenuProps');
   // Reset itemRefs on close.
   React.useEffect(function () {

package/dist/downshift.esm.js

@@ -2,7 +2,7 @@ import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/esm/objectWith
 import _extends from '@babel/runtime/helpers/esm/extends';
 import _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';
 import PropTypes from 'prop-types';
-import React, { cloneElement, Component, useRef, useEffect, useLayoutEffect, useCallback, useReducer, useMemo } from 'react';
+import React, { cloneElement, Component, useMemo, useRef, useEffect, useLayoutEffect, useCallback, useReducer } from 'react';
 import { isForwardRef } from 'react-is';
 import { compute } from 'compute-scroll-into-view';
 import { __assign } from 'tslib';
@@ -1612,16 +1612,18 @@ var useElementIds = 'useId' in React // Avoid conditional useId call
   if (!id) {
     id = reactId;
   }
-  var elementIdsRef = useRef({
-    labelId: labelId || id + "-label",
-    menuId: menuId || id + "-menu",
-    getItemId: getItemId || function (index) {
-      return id + "-item-" + index;
-    },
-    toggleButtonId: toggleButtonId || id + "-toggle-button",
-    inputId: inputId || id + "-input"
-  });
-  return elementIdsRef.current;
+  var elementIds = useMemo(function () {
+    return {
+      labelId: labelId || id + "-label",
+      menuId: menuId || id + "-menu",
+      getItemId: getItemId || function (index) {
+        return id + "-item-" + index;
+      },
+      toggleButtonId: toggleButtonId || id + "-toggle-button",
+      inputId: inputId || id + "-input"
+    };
+  }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
+  return elementIds;
 } : function useElementIds(_ref2) {
   var _ref2$id = _ref2.id,
     id = _ref2$id === void 0 ? "downshift-" + generateId() : _ref2$id,
@@ -1630,16 +1632,18 @@ var useElementIds = 'useId' in React // Avoid conditional useId call
     getItemId = _ref2.getItemId,
     toggleButtonId = _ref2.toggleButtonId,
     inputId = _ref2.inputId;
-  var elementIdsRef = useRef({
-    labelId: labelId || id + "-label",
-    menuId: menuId || id + "-menu",
-    getItemId: getItemId || function (index) {
-      return id + "-item-" + index;
-    },
-    toggleButtonId: toggleButtonId || id + "-toggle-button",
-    inputId: inputId || id + "-input"
-  });
-  return elementIdsRef.current;
+  var elementIds = useMemo(function () {
+    return {
+      labelId: labelId || id + "-label",
+      menuId: menuId || id + "-menu",
+      getItemId: getItemId || function (index) {
+        return id + "-item-" + index;
+      },
+      toggleButtonId: toggleButtonId || id + "-toggle-button",
+      inputId: inputId || id + "-input"
+    };
+  }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
+  return elementIds;
 };
 function getItemAndIndex(itemProp, indexProp, items, errorMessage) {
   var item, index;
@@ -1828,20 +1832,24 @@ function useMouseAndTouchTracker(environment, handleBlur, downshiftElementsRefs)
     isTouchMove: false,
     isTouchEnd: false
   });
+
+  // the elements should be retrieved the moment they are required because these are refs - they can be mutated
+  function getDownshiftElements() {
+    return downshiftElementsRefs.map(function (ref) {
+      return ref.current;
+    });
+  }
   useEffect(function () {
     if (!environment) {
       return noop;
     }
-    var downshiftElements = downshiftElementsRefs.map(function (ref) {
-      return ref.current;
-    });
     function onMouseDown() {
       mouseAndTouchTrackersRef.current.isTouchEnd = false; // reset this one.
       mouseAndTouchTrackersRef.current.isMouseDown = true;
     }
     function onMouseUp(event) {
       mouseAndTouchTrackersRef.current.isMouseDown = false;
-      if (!targetWithinDownshift(event.target, downshiftElements, environment)) {
+      if (!targetWithinDownshift(event.target, getDownshiftElements(), environment)) {
         handleBlur();
       }
     }
@@ -1854,7 +1862,7 @@ function useMouseAndTouchTracker(environment, handleBlur, downshiftElementsRefs)
     }
     function onTouchEnd(event) {
       mouseAndTouchTrackersRef.current.isTouchEnd = true;
-      if (!mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElements, environment, false)) {
+      if (!mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, getDownshiftElements(), environment, false)) {
         handleBlur();
       }
     }
@@ -2466,7 +2474,9 @@ function useSelect(userProps) {
     }
   }, [dispatch, latest]), useMemo(function () {
     return [menuRef, toggleButtonRef];
-  }, [menuRef.current, toggleButtonRef.current]));
+  },
+  // dependencies can be left empty because refs are getting mutated
+  []));
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps');
   // Reset itemRefs on close.
   useEffect(function () {
@@ -3088,7 +3098,9 @@ function useCombobox(userProps) {
     }
   }, [dispatch, latest]), useMemo(function () {
     return [menuRef, toggleButtonRef, inputRef];
-  }, [menuRef.current, toggleButtonRef.current, inputRef.current]));
+  },
+  // dependencies can be left empty because refs are getting mutated
+  []));
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getMenuProps');
   // Reset itemRefs on close.
   useEffect(function () {

package/dist/downshift.native.cjs.js

@@ -1506,16 +1506,18 @@ var useElementIds = 'useId' in React // Avoid conditional useId call
   if (!id) {
     id = reactId;
   }
-  var elementIdsRef = React.useRef({
-    labelId: labelId || id + "-label",
-    menuId: menuId || id + "-menu",
-    getItemId: getItemId || function (index) {
-      return id + "-item-" + index;
-    },
-    toggleButtonId: toggleButtonId || id + "-toggle-button",
-    inputId: inputId || id + "-input"
-  });
-  return elementIdsRef.current;
+  var elementIds = React.useMemo(function () {
+    return {
+      labelId: labelId || id + "-label",
+      menuId: menuId || id + "-menu",
+      getItemId: getItemId || function (index) {
+        return id + "-item-" + index;
+      },
+      toggleButtonId: toggleButtonId || id + "-toggle-button",
+      inputId: inputId || id + "-input"
+    };
+  }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
+  return elementIds;
 } : function useElementIds(_ref2) {
   var _ref2$id = _ref2.id,
     id = _ref2$id === void 0 ? "downshift-" + generateId() : _ref2$id,
@@ -1524,16 +1526,18 @@ var useElementIds = 'useId' in React // Avoid conditional useId call
     getItemId = _ref2.getItemId,
     toggleButtonId = _ref2.toggleButtonId,
     inputId = _ref2.inputId;
-  var elementIdsRef = React.useRef({
-    labelId: labelId || id + "-label",
-    menuId: menuId || id + "-menu",
-    getItemId: getItemId || function (index) {
-      return id + "-item-" + index;
-    },
-    toggleButtonId: toggleButtonId || id + "-toggle-button",
-    inputId: inputId || id + "-input"
-  });
-  return elementIdsRef.current;
+  var elementIds = React.useMemo(function () {
+    return {
+      labelId: labelId || id + "-label",
+      menuId: menuId || id + "-menu",
+      getItemId: getItemId || function (index) {
+        return id + "-item-" + index;
+      },
+      toggleButtonId: toggleButtonId || id + "-toggle-button",
+      inputId: inputId || id + "-input"
+    };
+  }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
+  return elementIds;
 };
 function getItemAndIndex(itemProp, indexProp, items, errorMessage) {
   var item, index;
@@ -2317,7 +2321,9 @@ function useSelect(userProps) {
     }
   }, [dispatch, latest]), React.useMemo(function () {
     return [menuRef, toggleButtonRef];
-  }, [menuRef.current, toggleButtonRef.current]));
+  },
+  // dependencies can be left empty because refs are getting mutated
+  []));
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps');
   // Reset itemRefs on close.
   React.useEffect(function () {
@@ -2927,7 +2933,9 @@ function useCombobox(userProps) {
     }
   }, [dispatch, latest]), React.useMemo(function () {
     return [menuRef, toggleButtonRef, inputRef];
-  }, [menuRef.current, toggleButtonRef.current, inputRef.current]));
+  },
+  // dependencies can be left empty because refs are getting mutated
+  []));
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getMenuProps');
   // Reset itemRefs on close.
   React.useEffect(function () {

package/dist/downshift.nativeweb.cjs.js

@@ -1614,16 +1614,18 @@ var useElementIds = 'useId' in React // Avoid conditional useId call
   if (!id) {
     id = reactId;
   }
-  var elementIdsRef = React.useRef({
-    labelId: labelId || id + "-label",
-    menuId: menuId || id + "-menu",
-    getItemId: getItemId || function (index) {
-      return id + "-item-" + index;
-    },
-    toggleButtonId: toggleButtonId || id + "-toggle-button",
-    inputId: inputId || id + "-input"
-  });
-  return elementIdsRef.current;
+  var elementIds = React.useMemo(function () {
+    return {
+      labelId: labelId || id + "-label",
+      menuId: menuId || id + "-menu",
+      getItemId: getItemId || function (index) {
+        return id + "-item-" + index;
+      },
+      toggleButtonId: toggleButtonId || id + "-toggle-button",
+      inputId: inputId || id + "-input"
+    };
+  }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
+  return elementIds;
 } : function useElementIds(_ref2) {
   var _ref2$id = _ref2.id,
     id = _ref2$id === void 0 ? "downshift-" + generateId() : _ref2$id,
@@ -1632,16 +1634,18 @@ var useElementIds = 'useId' in React // Avoid conditional useId call
     getItemId = _ref2.getItemId,
     toggleButtonId = _ref2.toggleButtonId,
     inputId = _ref2.inputId;
-  var elementIdsRef = React.useRef({
-    labelId: labelId || id + "-label",
-    menuId: menuId || id + "-menu",
-    getItemId: getItemId || function (index) {
-      return id + "-item-" + index;
-    },
-    toggleButtonId: toggleButtonId || id + "-toggle-button",
-    inputId: inputId || id + "-input"
-  });
-  return elementIdsRef.current;
+  var elementIds = React.useMemo(function () {
+    return {
+      labelId: labelId || id + "-label",
+      menuId: menuId || id + "-menu",
+      getItemId: getItemId || function (index) {
+        return id + "-item-" + index;
+      },
+      toggleButtonId: toggleButtonId || id + "-toggle-button",
+      inputId: inputId || id + "-input"
+    };
+  }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
+  return elementIds;
 };
 function getItemAndIndex(itemProp, indexProp, items, errorMessage) {
   var item, index;
@@ -1827,20 +1831,24 @@ function useMouseAndTouchTracker(environment, handleBlur, downshiftElementsRefs)
     isTouchMove: false,
     isTouchEnd: false
   });
+
+  // the elements should be retrieved the moment they are required because these are refs - they can be mutated
+  function getDownshiftElements() {
+    return downshiftElementsRefs.map(function (ref) {
+      return ref.current;
+    });
+  }
   React.useEffect(function () {
     if (!environment) {
       return noop;
     }
-    var downshiftElements = downshiftElementsRefs.map(function (ref) {
-      return ref.current;
-    });
     function onMouseDown() {
       mouseAndTouchTrackersRef.current.isTouchEnd = false; // reset this one.
       mouseAndTouchTrackersRef.current.isMouseDown = true;
     }
     function onMouseUp(event) {
       mouseAndTouchTrackersRef.current.isMouseDown = false;
-      if (!targetWithinDownshift(event.target, downshiftElements, environment)) {
+      if (!targetWithinDownshift(event.target, getDownshiftElements(), environment)) {
         handleBlur();
       }
     }
@@ -1853,7 +1861,7 @@ function useMouseAndTouchTracker(environment, handleBlur, downshiftElementsRefs)
     }
     function onTouchEnd(event) {
       mouseAndTouchTrackersRef.current.isTouchEnd = true;
-      if (!mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElements, environment, false)) {
+      if (!mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, getDownshiftElements(), environment, false)) {
         handleBlur();
       }
     }
@@ -2465,7 +2473,9 @@ function useSelect(userProps) {
     }
   }, [dispatch, latest]), React.useMemo(function () {
     return [menuRef, toggleButtonRef];
-  }, [menuRef.current, toggleButtonRef.current]));
+  },
+  // dependencies can be left empty because refs are getting mutated
+  []));
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps');
   // Reset itemRefs on close.
   React.useEffect(function () {
@@ -3075,7 +3085,9 @@ function useCombobox(userProps) {
     }
   }, [dispatch, latest]), React.useMemo(function () {
     return [menuRef, toggleButtonRef, inputRef];
-  }, [menuRef.current, toggleButtonRef.current, inputRef.current]));
+  },
+  // dependencies can be left empty because refs are getting mutated
+  []));
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getMenuProps');
   // Reset itemRefs on close.
   React.useEffect(function () {

package/dist/downshift.umd.js

@@ -2953,16 +2953,18 @@
     if (!id) {
       id = reactId;
     }
-    var elementIdsRef = React.useRef({
-      labelId: labelId || id + "-label",
-      menuId: menuId || id + "-menu",
-      getItemId: getItemId || function (index) {
-        return id + "-item-" + index;
-      },
-      toggleButtonId: toggleButtonId || id + "-toggle-button",
-      inputId: inputId || id + "-input"
-    });
-    return elementIdsRef.current;
+    var elementIds = React.useMemo(function () {
+      return {
+        labelId: labelId || id + "-label",
+        menuId: menuId || id + "-menu",
+        getItemId: getItemId || function (index) {
+          return id + "-item-" + index;
+        },
+        toggleButtonId: toggleButtonId || id + "-toggle-button",
+        inputId: inputId || id + "-input"
+      };
+    }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
+    return elementIds;
   } : function useElementIds(_ref2) {
     var _ref2$id = _ref2.id,
       id = _ref2$id === void 0 ? "downshift-" + generateId() : _ref2$id,
@@ -2971,16 +2973,18 @@
       getItemId = _ref2.getItemId,
       toggleButtonId = _ref2.toggleButtonId,
       inputId = _ref2.inputId;
-    var elementIdsRef = React.useRef({
-      labelId: labelId || id + "-label",
-      menuId: menuId || id + "-menu",
-      getItemId: getItemId || function (index) {
-        return id + "-item-" + index;
-      },
-      toggleButtonId: toggleButtonId || id + "-toggle-button",
-      inputId: inputId || id + "-input"
-    });
-    return elementIdsRef.current;
+    var elementIds = React.useMemo(function () {
+      return {
+        labelId: labelId || id + "-label",
+        menuId: menuId || id + "-menu",
+        getItemId: getItemId || function (index) {
+          return id + "-item-" + index;
+        },
+        toggleButtonId: toggleButtonId || id + "-toggle-button",
+        inputId: inputId || id + "-input"
+      };
+    }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
+    return elementIds;
   };
   function getItemAndIndex(itemProp, indexProp, items, errorMessage) {
     var item, index;
@@ -3169,20 +3173,24 @@
       isTouchMove: false,
       isTouchEnd: false
     });
+
+    // the elements should be retrieved the moment they are required because these are refs - they can be mutated
+    function getDownshiftElements() {
+      return downshiftElementsRefs.map(function (ref) {
+        return ref.current;
+      });
+    }
     React.useEffect(function () {
       if (!environment) {
         return noop;
       }
-      var downshiftElements = downshiftElementsRefs.map(function (ref) {
-        return ref.current;
-      });
       function onMouseDown() {
         mouseAndTouchTrackersRef.current.isTouchEnd = false; // reset this one.
         mouseAndTouchTrackersRef.current.isMouseDown = true;
       }
       function onMouseUp(event) {
         mouseAndTouchTrackersRef.current.isMouseDown = false;
-        if (!targetWithinDownshift(event.target, downshiftElements, environment)) {
+        if (!targetWithinDownshift(event.target, getDownshiftElements(), environment)) {
           handleBlur();
         }
       }
@@ -3195,7 +3203,7 @@
       }
       function onTouchEnd(event) {
         mouseAndTouchTrackersRef.current.isTouchEnd = true;
-        if (!mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElements, environment, false)) {
+        if (!mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, getDownshiftElements(), environment, false)) {
           handleBlur();
         }
       }
@@ -3840,7 +3848,9 @@
       }
     }, [dispatch, latest]), React.useMemo(function () {
       return [menuRef, toggleButtonRef];
-    }, [menuRef.current, toggleButtonRef.current]));
+    },
+    // dependencies can be left empty because refs are getting mutated
+    []));
     var setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps');
     // Reset itemRefs on close.
     React.useEffect(function () {
@@ -4462,7 +4472,9 @@
       }
     }, [dispatch, latest]), React.useMemo(function () {
       return [menuRef, toggleButtonRef, inputRef];
-    }, [menuRef.current, toggleButtonRef.current, inputRef.current]));
+    },
+    // dependencies can be left empty because refs are getting mutated
+    []));
     var setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getMenuProps');
     // Reset itemRefs on close.
     React.useEffect(function () {