downshift 6.0.2 → 6.0.6

package/README.md

@@ -1,7 +1,7 @@
 <h1 align="center">
   downshift 🏎
   <br>
-  <img src="https://downshift-js.com/logo/downshift.svg" alt="downshift logo" title="downshift logo" width="300">
+  <img src="https://github.com/downshift-js/downshift/blob/master/other/public/logo/downshift.svg" alt="downshift logo" title="downshift logo" width="300">
   <br>
 </h1>
 <p align="center" style="font-size: 1.2rem;">Primitives to build simple, flexible, WAI-ARIA compliant React
@@ -38,29 +38,33 @@ use case.
 
 ## This solution
 
-This library provides its users two main sets of solutions: the `Downshift`
-component and a set of hooks. The component is still the main part of the
-library, providing the autocomplete/combobox logic as a render prop. The hooks
-are newer and are going to be the way forward to providing accessibile
-experiences. Right now we support `useSelect` for `select` components,
-`useCombobox` for `combobox/autocomplete` inputs and `useMultipleSelection` to
-make the selection of multiple items easier for both the `select` and `combobox`
-elements.
-
-Since both `useCombobox` and the component `Downshift` aim to provide
-accessibility to a combobox, we suggest trying the new `useCombobox` first. If
-you feel that `Downshift` still covers your use cases better then use the
-component instead. However, if these use cases should also be covered in
-`useCombobox`, make sure to create an issue to help us improve the hook. Both
-the hooks and the component are actively maintained but we are cool kids from
-the future and prefer to share `React` logic via hooks.
+The library offers a couple of solutions. The first solution, which is the one
+we recommend you to try first, is a set of React hooks. Each hook provides the
+stateful logic needed to make the corresponding component functional and
+accessible. Navigate to the documentation for each by using the links in the
+list below.
+
+- [useSelect][useselect-readme] for a custom select component.
+- [useCombobox][combobox-readme] for a combobox/autocomplete input.
+- [useMultipleSelection][multiple-selection-readme] for selecting multiple items
+  in a select or a combobox, as well as deleting items from selection or
+  navigating between the selected items.
+
+The second solution is the `Downshift` component, which can also be used to
+create accessible combobox and select components, providing the logic in the
+form of a render prop. It served as inspiration for developing the hooks and it
+has been around for a while. It established a successful pattern for making
+components accessible and functional while giving developers complete freedom
+when building the UI.
 
 The `README` on this page convers only the component while each hook has its own
-`README` file. Check the [hooks section](#the-react-hooks-api) for links to
-each. Both the component and the hooks are similar in many concepts so you can
-always switch between the documentation pages in order to find information.
+`README` page. You can navigate to the [hooks page][hooks-readme] or go directly
+to the hook you need by using the links in the list above.
 
-### Downshift component
+For examples on how to use the hooks or the Downshift component, check out our
+[docsite][docsite]!
+
+### Downshift
 
 This is a component that controls user interactions and state for you so you can
 create autocomplete/combobox or select dropdown components. It uses a [render
@@ -76,33 +80,6 @@ harder to contribute to.
 > NOTE: The original use case of this component is autocomplete, however the API
 > is powerful and flexible enough to build things like dropdowns as well.
 
-### The React Hooks API
-
-`Downshift` proved to be a versatile component to create not only combobox
-inputs, but also custom select elements and even multiple selection experiences.
-However, additional code was needed to make these experiences fully accessible,
-so we decided to create dedicated React hooks for them. Each hook handles a
-specific dropdown variation and aims to make it fully accessible.
-
-You can check the progress in the [hooks page][hooks-readme]. The hooks
-published so far are:
-
-- [useSelect][useselect-readme] for a custom select dropdown.
-- [useCombobox][combobox-readme] for a combobox/autocomplete input.
-- [useMultipleSelection][multiple-selection-readme] for allowing the selection
-  of multiple items in a select or a combobox.
-
-For examples on how to use the hooks check out our [docsite][docsite]!
-
-### Bundle size concerns
-
-Adding the hooks into this repo increased the bundle size considerably. However,
-since we create the bundle with `Rollup` and export both `<Downshift>` and the
-hooks as modules, you should be able to have the library treeshaked (pruned) and
-receive only the code you need. Since version `3.4.8`
-[BundlePhobia][bundle-phobia-link] marked `Downshift` as both `tree-shakeable`
-and `side-effect free`.
-
 ## Table of Contents
 
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
@@ -183,7 +160,7 @@ npm install --save downshift
 
 ## Usage
 
-> [Try it out in the browser](https://codesandbox.io/s/simple-downshift-with-getrootprops-example-24s13)
+> [Try it out in the browser][code-sandbox-try-it-out]
 
 ```jsx
 import * as React from 'react'
@@ -253,8 +230,7 @@ render(
 )
 ```
 
-The previous example without `getRootProps` is
-[here](https://codesandbox.io/s/n9095).
+There is also an [example without getRootProps][code-sandbox-no-get-root-props].
 
 > Warning: The example without `getRootProps` is not fully accessible with
 > screen readers as it's not possible to achieve the HTML structure suggested by
@@ -1090,14 +1066,21 @@ platforms:
 ## Examples
 
 > 🚨 We're in the process of moving all examples to the
-> [downshift-examples](https://github.com/kentcdodds/downshift-examples) repo
+> [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))
 
+> 🚨 We're also in the process of updating our examples from the
+> [downshift-docs](https://github.com/downshift-js/downshift-docs) repo which is
+> actually used to create our docsite at [downshit-js.com][docsite]). Make sure to
+> check it out for the most relevant Downshift examples or try out the new hooks
+> that aim to replace Downshift.
+
 **Ordered Examples:**
 
 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) -    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) -
     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) -
@@ -1110,14 +1093,6 @@ If you're just learning downshift, review these in order:
     Shows how to create a MultiDownshift component that allows for an array of
     selectedItems for multiple selection using a state reducer
 
-**Hooks Examples:**
-
-We are also in the process of updating our [docsite][docsite] and we aim to add
-the examples that illustrate the use of hooks there. This is a great opportunity
-to contribute, by converting existing `Downshift` examples to either `useSelect`
-or `useCombobox` or by adding any other scenarios that you feel are
-representative.
-
 **Other Examples:**
 
 Check out these examples of more advanced use/edge cases:
@@ -1237,7 +1212,7 @@ You can implement these other solutions using `downshift`, but if you'd prefer
 to use these out of the box solutions, then that's fine too:
 
 - [`react-select`](https://github.com/JedWatson/react-select)
-- [`react-autocomplete`](https://github.com/reactjs/react-autocomplete)
+- [`react-autosuggest`](https://github.com/moroshko/react-autosuggest)
 
 ## Bindings for ReasonML
 
@@ -1422,6 +1397,10 @@ Thanks goes to these people ([emoji key][emojis]):
     <td align="center"><a href="http://dataart.com"><img src="https://avatars1.githubusercontent.com/u/5685800?v=4" width="100px;" alt=""/><br /><sub><b>Sergey Skrynnikov</b></sub></a><br /><a href="https://github.com/downshift-js/downshift/commits?author=IwalkAlone" title="Code">💻</a> <a href="https://github.com/downshift-js/downshift/commits?author=IwalkAlone" title="Tests">⚠️</a></td>
     <td align="center"><a href="https://www.linkedin.com/in/vvoyer"><img src="https://avatars0.githubusercontent.com/u/123822?v=4" width="100px;" alt=""/><br /><sub><b>Vincent Voyer</b></sub></a><br /><a href="https://github.com/downshift-js/downshift/commits?author=vvo" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/limejoe"><img src="https://avatars2.githubusercontent.com/u/7977551?v=4" width="100px;" alt=""/><br /><sub><b>limejoe</b></sub></a><br /><a href="https://github.com/downshift-js/downshift/commits?author=limejoe" title="Code">💻</a> <a href="https://github.com/downshift-js/downshift/issues?q=author%3Alimejoe" title="Bug reports">🐛</a></td>
+    <td align="center"><a href="https://github.com/k88manish"><img src="https://avatars2.githubusercontent.com/u/19614770?v=4" width="100px;" alt=""/><br /><sub><b>Manish Kumar</b></sub></a><br /><a href="https://github.com/downshift-js/downshift/commits?author=k88manish" title="Code">💻</a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/fcrezza"><img src="https://avatars2.githubusercontent.com/u/48123020?v=4" width="100px;" alt=""/><br /><sub><b>Anang Fachreza</b></sub></a><br /><a href="https://github.com/downshift-js/downshift/commits?author=fcrezza" title="Documentation">📖</a> <a href="#example-fcrezza" title="Examples">💡</a></td>
   </tr>
 </table>
 
@@ -1503,3 +1482,7 @@ MIT
 [select-aria]:
   https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.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
+[code-sandbox-no-get-root-props]:
+  https://codesandbox.io/s/github/kentcdodds/downshift-examples?file=/src/downshift/ordered-examples/01-basic-autocomplete.js

package/dist/downshift.cjs.js

@@ -2088,6 +2088,69 @@ function useGetterPropsCalledChecker() {
   }, []);
   return setGetterPropCallInfo;
 }
+function useA11yMessageSetter(getA11yMessage, dependencyArray, _ref2) {
+  var isInitialMount = _ref2.isInitialMount,
+      previousResultCount = _ref2.previousResultCount,
+      highlightedIndex = _ref2.highlightedIndex,
+      items = _ref2.items,
+      environment = _ref2.environment,
+      rest = _objectWithoutPropertiesLoose(_ref2, ["isInitialMount", "previousResultCount", "highlightedIndex", "items", "environment"]);
+
+  // Sets a11y status message on changes in state.
+  react.useEffect(function () {
+    if (isInitialMount) {
+      return;
+    }
+
+    updateA11yStatus(function () {
+      return getA11yMessage(_extends({
+        highlightedIndex: highlightedIndex,
+        highlightedItem: items[highlightedIndex],
+        resultCount: items.length,
+        previousResultCount: previousResultCount
+      }, rest));
+    }, environment.document); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, dependencyArray);
+}
+function useScrollIntoView(_ref3) {
+  var highlightedIndex = _ref3.highlightedIndex,
+      isOpen = _ref3.isOpen,
+      itemRefs = _ref3.itemRefs,
+      getItemNodeFromIndex = _ref3.getItemNodeFromIndex,
+      menuElement = _ref3.menuElement,
+      scrollIntoViewProp = _ref3.scrollIntoView;
+  // used not to scroll on highlight by mouse.
+  var shouldScrollRef = react.useRef(true); // Scroll on highlighted item if change comes from keyboard.
+
+  react.useEffect(function () {
+    if (highlightedIndex < 0 || !isOpen || !Object.keys(itemRefs.current).length) {
+      return;
+    }
+
+    if (shouldScrollRef.current === false) {
+      shouldScrollRef.current = true;
+    } else {
+      scrollIntoViewProp(getItemNodeFromIndex(highlightedIndex), menuElement);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [highlightedIndex]);
+  return shouldScrollRef;
+}
+function useControlPropsValidator(_ref4) {
+  var isInitialMount = _ref4.isInitialMount,
+      props = _ref4.props,
+      state = _ref4.state;
+  // used for checking when props are moving from controlled to uncontrolled.
+  var prevPropsRef = react.useRef(props);
+  react.useEffect(function () {
+    if (isInitialMount) {
+      return;
+    }
+
+    validateControlledUnchanged(state, prevPropsRef.current, props);
+    prevPropsRef.current = props;
+  }, [state, props, isInitialMount]);
+}
 
 function getItemIndexByCharacterKey(keysSoFar, highlightedIndex, items, itemToStringParam, getItemNodeFromIndex) {
   var lowerCasedItemStrings = items.map(function (item) {
@@ -2454,9 +2517,7 @@ function useSelect(userProps) {
   var toggleButtonRef = react.useRef(null);
   var menuRef = react.useRef(null);
   var itemRefs = react.useRef();
-  itemRefs.current = {}; // used not to scroll when highlight by mouse.
-
-  var shouldScrollRef = react.useRef(true); // used not to trigger menu blur action in some scenarios.
+  itemRefs.current = {}; // used not to trigger menu blur action in some scenarios.
 
   var shouldBlurRef = react.useRef(true); // used to keep the inputValue clearTimeout object between renders.
 
@@ -2465,9 +2526,7 @@ function useSelect(userProps) {
   var elementIdsRef = react.useRef(getElementIds(props)); // used to keep track of how many items we had on previous cycle.
 
   var previousResultCountRef = react.useRef();
-  var isInitialMountRef = react.useRef(true); // used for checking when props are moving from controlled to uncontrolled.
-
-  var prevPropsRef = react.useRef(props); // utility callback to get item element.
+  var isInitialMountRef = react.useRef(true); // utility callback to get item element.
 
   var latest = useLatestRef({
     state: state,
@@ -2480,45 +2539,30 @@ function useSelect(userProps) {
   // Sets a11y status message on changes in state.
 
 
-  react.useEffect(function () {
-    if (isInitialMountRef.current) {
-      return;
-    }
-
-    var previousResultCount = previousResultCountRef.current;
-    updateA11yStatus(function () {
-      return getA11yStatusMessage({
-        isOpen: isOpen,
-        highlightedIndex: highlightedIndex,
-        selectedItem: selectedItem,
-        inputValue: inputValue,
-        highlightedItem: items[highlightedIndex],
-        resultCount: items.length,
-        itemToString: itemToString,
-        previousResultCount: previousResultCount
-      });
-    }, environment.document); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isOpen, highlightedIndex, inputValue, items]); // Sets a11y status message on changes in selectedItem.
-
-  react.useEffect(function () {
-    if (isInitialMountRef.current) {
-      return;
-    }
-
-    var previousResultCount = previousResultCountRef.current;
-    updateA11yStatus(function () {
-      return getA11ySelectionMessage({
-        isOpen: isOpen,
-        highlightedIndex: highlightedIndex,
-        selectedItem: selectedItem,
-        inputValue: inputValue,
-        highlightedItem: items[highlightedIndex],
-        resultCount: items.length,
-        itemToString: itemToString,
-        previousResultCount: previousResultCount
-      });
-    }, environment.document); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedItem]); // Sets cleanup for the keysSoFar after 500ms.
+  useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], _extends({
+    isInitialMount: isInitialMountRef.current,
+    previousResultCount: previousResultCountRef.current,
+    items: items,
+    environment: environment,
+    itemToString: itemToString
+  }, state)); // Sets a11y status message on changes in selectedItem.
+
+  useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], _extends({
+    isInitialMount: isInitialMountRef.current,
+    previousResultCount: previousResultCountRef.current,
+    items: items,
+    environment: environment,
+    itemToString: itemToString
+  }, state)); // Scroll on highlighted item if change comes from keyboard.
+
+  var shouldScrollRef = useScrollIntoView({
+    menuElement: menuRef.current,
+    highlightedIndex: highlightedIndex,
+    isOpen: isOpen,
+    itemRefs: itemRefs,
+    scrollIntoView: scrollIntoView,
+    getItemNodeFromIndex: getItemNodeFromIndex
+  }); // Sets cleanup for the keysSoFar after 500ms.
 
   react.useEffect(function () {
     // init the clean function here as we need access to dispatch.
@@ -2535,8 +2579,13 @@ function useSelect(userProps) {
       return;
     }
 
-    clearTimeoutRef.current(dispatch); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [inputValue]);
+    clearTimeoutRef.current(dispatch);
+  }, [dispatch, inputValue]);
+  useControlPropsValidator({
+    isInitialMount: isInitialMountRef.current,
+    props: props,
+    state: state
+  });
   /* Controls the focus on the menu or the toggle button. */
 
   react.useEffect(function () {
@@ -2569,35 +2618,14 @@ function useSelect(userProps) {
       }
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  }, [isOpen]); // Scroll on highlighted item if change comes from keyboard.
-
-  react.useEffect(function () {
-    if (highlightedIndex < 0 || !isOpen || !Object.keys(itemRefs.current).length) {
-      return;
-    }
-
-    if (shouldScrollRef.current === false) {
-      shouldScrollRef.current = true;
-    } else {
-      scrollIntoView(getItemNodeFromIndex(highlightedIndex), menuRef.current);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [highlightedIndex]);
+  }, [isOpen]);
   react.useEffect(function () {
     if (isInitialMountRef.current) {
       return;
     }
 
     previousResultCountRef.current = items.length;
-  });
-  react.useEffect(function () {
-    if (isInitialMountRef.current) {
-      return;
-    }
-
-    validateControlledUnchanged(state, prevPropsRef.current, props);
-    prevPropsRef.current = props;
-  }, [state, props]); // Add mouse/touch events to document.
+  }); // Add mouse/touch events to document.
 
   var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [menuRef, toggleButtonRef], environment, function () {
     dispatch({
@@ -2891,7 +2919,7 @@ function useSelect(userProps) {
     }
 
     return itemProps;
-  }, [dispatch, latest]);
+  }, [dispatch, latest, shouldScrollRef]);
   return {
     // prop getters.
     getToggleButtonProps: getToggleButtonProps,
@@ -3117,7 +3145,7 @@ function downshiftUseComboboxReducer(state, action) {
       break;
 
     case InputKeyDownEnter:
-      changes = _extends({}, state.highlightedIndex >= 0 && {
+      changes = _extends({}, state.isOpen && state.highlightedIndex >= 0 && {
         selectedItem: props.items[state.highlightedIndex],
         isOpen: getDefaultValue(props, 'isOpen'),
         highlightedIndex: getDefaultValue(props, 'highlightedIndex'),
@@ -3136,25 +3164,28 @@ function downshiftUseComboboxReducer(state, action) {
       break;
 
     case InputKeyDownHome:
-      changes = {
+      changes = _extends({}, state.isOpen && {
         highlightedIndex: getNextNonDisabledIndex(1, 0, props.items.length, action.getItemNodeFromIndex, false)
-      };
+      });
       break;
 
     case InputKeyDownEnd:
-      changes = {
+      changes = _extends({}, state.isOpen && {
         highlightedIndex: getNextNonDisabledIndex(-1, props.items.length - 1, props.items.length, action.getItemNodeFromIndex, false)
-      };
+      });
       break;
 
     case InputBlur:
-      changes = _extends({
-        isOpen: false,
-        highlightedIndex: -1
-      }, state.highlightedIndex >= 0 && action.selectItem && {
-        selectedItem: props.items[state.highlightedIndex],
-        inputValue: props.itemToString(props.items[state.highlightedIndex])
-      });
+      if (state.isOpen) {
+        changes = _extends({
+          isOpen: false,
+          highlightedIndex: -1
+        }, state.highlightedIndex >= 0 && action.selectItem && {
+          selectedItem: props.items[state.highlightedIndex],
+          inputValue: props.itemToString(props.items[state.highlightedIndex])
+        });
+      }
+
       break;
 
     case InputChange:
@@ -3272,16 +3303,12 @@ function useCombobox(userProps) {
   var inputRef = react.useRef(null);
   var toggleButtonRef = react.useRef(null);
   var comboboxRef = react.useRef(null);
-  itemRefs.current = {}; // used not to scroll on highlight by mouse.
-
-  var shouldScrollRef = react.useRef(true);
+  itemRefs.current = {};
   var isInitialMountRef = react.useRef(true); // prevent id re-generation between renders.
 
   var elementIdsRef = react.useRef(getElementIds$1(props)); // used to keep track of how many items we had on previous cycle.
 
-  var previousResultCountRef = react.useRef(); // used for checking when props are moving from controlled to uncontrolled.
-
-  var prevPropsRef = react.useRef(props); // utility callback to get item element.
+  var previousResultCountRef = react.useRef(); // utility callback to get item element.
 
   var latest = useLatestRef({
     state: state,
@@ -3294,58 +3321,35 @@ function useCombobox(userProps) {
   // Sets a11y status message on changes in state.
 
 
-  react.useEffect(function () {
-    if (isInitialMountRef.current) {
-      return;
-    }
-
-    var previousResultCount = previousResultCountRef.current;
-    updateA11yStatus(function () {
-      return getA11yStatusMessage({
-        isOpen: isOpen,
-        highlightedIndex: highlightedIndex,
-        selectedItem: selectedItem,
-        inputValue: inputValue,
-        highlightedItem: items[highlightedIndex],
-        resultCount: items.length,
-        itemToString: itemToString,
-        previousResultCount: previousResultCount
-      });
-    }, environment.document); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isOpen, highlightedIndex, inputValue, items]); // Sets a11y status message on changes in selectedItem.
-
-  react.useEffect(function () {
-    if (isInitialMountRef.current) {
-      return;
-    }
-
-    var previousResultCount = previousResultCountRef.current;
-    updateA11yStatus(function () {
-      return getA11ySelectionMessage({
-        isOpen: isOpen,
-        highlightedIndex: highlightedIndex,
-        selectedItem: selectedItem,
-        inputValue: inputValue,
-        highlightedItem: items[highlightedIndex],
-        resultCount: items.length,
-        itemToString: itemToString,
-        previousResultCount: previousResultCount
-      });
-    }, environment.document); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedItem]); // Scroll on highlighted item if change comes from keyboard.
-
-  react.useEffect(function () {
-    if (highlightedIndex < 0 || !isOpen || !Object.keys(itemRefs.current).length) {
-      return;
-    }
-
-    if (shouldScrollRef.current === false) {
-      shouldScrollRef.current = true;
-    } else {
-      scrollIntoView(getItemNodeFromIndex(highlightedIndex), menuRef.current);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [highlightedIndex]); // Controls the focus on the menu or the toggle button.
+  useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], _extends({
+    isInitialMount: isInitialMountRef.current,
+    previousResultCount: previousResultCountRef.current,
+    items: items,
+    environment: environment,
+    itemToString: itemToString
+  }, state)); // Sets a11y status message on changes in selectedItem.
+
+  useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], _extends({
+    isInitialMount: isInitialMountRef.current,
+    previousResultCount: previousResultCountRef.current,
+    items: items,
+    environment: environment,
+    itemToString: itemToString
+  }, state)); // Scroll on highlighted item if change comes from keyboard.
+
+  var shouldScrollRef = useScrollIntoView({
+    menuElement: menuRef.current,
+    highlightedIndex: highlightedIndex,
+    isOpen: isOpen,
+    itemRefs: itemRefs,
+    scrollIntoView: scrollIntoView,
+    getItemNodeFromIndex: getItemNodeFromIndex
+  });
+  useControlPropsValidator({
+    isInitialMount: isInitialMountRef.current,
+    props: props,
+    state: state
+  }); // Controls the focus on the input on open.
 
   react.useEffect(function () {
     // Don't focus menu on first render.
@@ -3365,15 +3369,7 @@ function useCombobox(userProps) {
     }
 
     previousResultCountRef.current = items.length;
-  });
-  react.useEffect(function () {
-    if (isInitialMountRef.current) {
-      return;
-    }
-
-    validateControlledUnchanged(state, prevPropsRef.current, props);
-    prevPropsRef.current = props;
-  }, [state, props]); // Add mouse/touch events to document.
+  }); // Add mouse/touch events to document.
 
   var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [comboboxRef, menuRef, toggleButtonRef], environment, function () {
     dispatch({
@@ -3433,13 +3429,14 @@ function useCombobox(userProps) {
 
         var latestState = latest.current.state;
 
-        if (latestState.isOpen && latestState.highlightedIndex > -1) {
+        if (latestState.isOpen) {
           event.preventDefault();
-          dispatch({
-            type: InputKeyDownEnter,
-            getItemNodeFromIndex: getItemNodeFromIndex
-          });
         }
+
+        dispatch({
+          type: InputKeyDownEnter,
+          getItemNodeFromIndex: getItemNodeFromIndex
+        });
       }
     };
   }, [dispatch, latest]); // Getter props.
@@ -3524,7 +3521,7 @@ function useCombobox(userProps) {
         inputRef.current.focus();
       }
     }), _ref4), rest);
-  }, [dispatch, latest]);
+  }, [dispatch, latest, shouldScrollRef]);
   var getToggleButtonProps = react.useCallback(function (_temp4) {
     var _extends4;
 
@@ -4004,9 +4001,7 @@ function useMultipleSelection(userProps) {
   var dropdownRef = react.useRef(null);
   var previousSelectedItemsRef = react.useRef(selectedItems);
   var selectedItemRefs = react.useRef();
-  selectedItemRefs.current = []; // used for checking when props are moving from controlled to uncontrolled.
-
-  var prevPropsRef = react.useRef(props);
+  selectedItemRefs.current = [];
   var latest = useLatestRef({
     state: state,
     props: props
@@ -4046,14 +4041,11 @@ function useMultipleSelection(userProps) {
       selectedItemRefs.current[activeIndex].focus();
     }
   }, [activeIndex]);
-  react.useEffect(function () {
-    if (isInitialMountRef.current) {
-      return;
-    }
-
-    validateControlledUnchanged(state, prevPropsRef.current, props);
-    prevPropsRef.current = props;
-  }, [state, props]);
+  useControlPropsValidator({
+    isInitialMount: isInitialMountRef.current,
+    props: props,
+    state: state
+  });
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getDropdownProps'); // Make initial ref false.
 
   react.useEffect(function () {