downshift 5.3.0-alpha → 5.4.2

package/dist/downshift.umd.js

@@ -1326,7 +1326,7 @@
 
 
   function scrollIntoView(node, menuNode) {
-    if (node === null) {
+    if (!node) {
       return;
     }
 
@@ -1627,6 +1627,10 @@
       circular = true;
     }
 
+    if (itemCount === 0) {
+      return -1;
+    }
+
     var itemsLastIndex = itemCount - 1;
 
     if (typeof baseIndex !== 'number' || baseIndex < 0 || baseIndex >= itemCount) {
@@ -1705,6 +1709,19 @@
     });
   }
 
+  function validateControlledUnchanged(state, prevProps, nextProps) {
+    var warningDescription = "This prop should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled Downshift element for the lifetime of the component. More info: https://github.com/downshift-js/downshift#control-props";
+    Object.keys(state).forEach(function (propKey) {
+      if (prevProps[propKey] !== undefined && nextProps[propKey] === undefined) {
+        // eslint-disable-next-line no-console
+        console.error("downshift: A component has changed the controlled prop \"" + propKey + "\" to be uncontrolled. " + warningDescription);
+      } else if (prevProps[propKey] === undefined && nextProps[propKey] !== undefined) {
+        // eslint-disable-next-line no-console
+        console.error("downshift: A component has changed the uncontrolled prop \"" + propKey + "\" to be controlled. " + warningDescription);
+      }
+    });
+  }
+
   var cleanupStatus = debounce(function () {
     getStatusDiv().textContent = '';
   }, 500);
@@ -1799,8 +1816,12 @@
     touchEnd: touchEnd
   });
 
-  var Downshift = /*#__PURE__*/function () {
-    var Downshift = /*#__PURE__*/function (_Component) {
+  var Downshift =
+  /*#__PURE__*/
+  function () {
+    var Downshift =
+    /*#__PURE__*/
+    function (_Component) {
       _inheritsLoose(Downshift, _Component);
 
       function Downshift(_props) {
@@ -1900,7 +1921,7 @@
           // See https://github.com/downshift-js/downshift/issues/217 for more info.
 
           if (!isStateToSetFunction && stateToSet.hasOwnProperty('inputValue')) {
-            _this.props.onInputValueChange(stateToSet.inputValue, _extends(_extends({}, _this.getStateAndHelpers()), stateToSet));
+            _this.props.onInputValueChange(stateToSet.inputValue, _extends({}, _this.getStateAndHelpers(), {}, stateToSet));
           }
 
           return _this.setState(function (state) {
@@ -1950,7 +1971,7 @@
             // earlier, so we'll call it now that we know what the inputValue state will be.
 
             if (isStateToSetFunction && newStateToSet.hasOwnProperty('inputValue')) {
-              _this.props.onInputValueChange(newStateToSet.inputValue, _extends(_extends({}, _this.getStateAndHelpers()), newStateToSet));
+              _this.props.onInputValueChange(newStateToSet.inputValue, _extends({}, _this.getStateAndHelpers(), {}, newStateToSet));
             }
 
             return nextState;
@@ -2105,7 +2126,7 @@
             });
           }
         };
-        _this.buttonKeyDownHandlers = _extends(_extends({}, _this.keyDownHandlers), {}, {
+        _this.buttonKeyDownHandlers = _extends({}, _this.keyDownHandlers, {
           ' ': function _(event) {
             event.preventDefault();
             this.toggleMenu({
@@ -2113,7 +2134,7 @@
             });
           }
         });
-        _this.inputKeyDownHandlers = _extends(_extends({}, _this.keyDownHandlers), {}, {
+        _this.inputKeyDownHandlers = _extends({}, _this.keyDownHandlers, {
           Home: function Home(event) {
             var _this4 = this;
 
@@ -2177,13 +2198,13 @@
             onBlur: callAllEventHandlers(onBlur, _this.buttonHandleBlur)
           };
           var eventHandlers = rest.disabled ? {} : enabledEventHandlers;
-          return _extends(_extends({
+          return _extends({
             type: 'button',
             role: 'button',
             'aria-label': isOpen ? 'close menu' : 'open menu',
             'aria-haspopup': true,
             'data-toggle': true
-          }, eventHandlers), rest);
+          }, eventHandlers, {}, rest);
         };
 
         _this.buttonHandleKeyUp = function (event) {
@@ -2269,7 +2290,7 @@
           /* istanbul ignore if (react-native) */
 
 
-          return _extends(_extends({
+          return _extends({
             'aria-autocomplete': 'list',
             'aria-activedescendant': isOpen && typeof highlightedIndex === 'number' && highlightedIndex >= 0 ? _this.getItemId(highlightedIndex) : null,
             'aria-controls': isOpen ? _this.menuId : null,
@@ -2279,7 +2300,7 @@
             autoComplete: 'off',
             value: inputValue,
             id: _this.inputId
-          }, eventHandlers), rest);
+          }, eventHandlers, {}, rest);
         };
 
         _this.inputHandleKeyDown = function (event) {
@@ -2397,11 +2418,11 @@
           var eventHandlers = rest.disabled ? {
             onMouseDown: enabledEventHandlers.onMouseDown
           } : enabledEventHandlers;
-          return _extends(_extends({
+          return _extends({
             id: _this.getItemId(index),
             role: 'option',
             'aria-selected': _this.getState().highlightedIndex === index
-          }, eventHandlers), rest);
+          }, eventHandlers, {}, rest);
         };
 
         _this.clearItems = function () {
@@ -2434,11 +2455,11 @@
 
           _this.internalSetState(function (_ref9) {
             var isOpen = _ref9.isOpen;
-            return _extends(_extends({
+            return _extends({
               isOpen: !isOpen
             }, isOpen && {
               highlightedIndex: _this.props.defaultHighlightedIndex
-            }), otherStateToSet);
+            }, {}, otherStateToSet);
           }, function () {
             var _this$getState7 = _this.getState(),
                 isOpen = _this$getState7.isOpen,
@@ -2745,7 +2766,7 @@
       };
 
       _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
-        validateControlledUnchanged(prevProps, this.props);
+        validateControlledUnchanged(this.state, prevProps, this.props);
         /* istanbul ignore if (react-native) */
 
         if ( this.getMenuProps.called && !this.getMenuProps.suppressRefError) {
@@ -2935,19 +2956,6 @@
     }
   }
 
-  function validateControlledUnchanged(prevProps, nextProps) {
-    var warningDescription = "This prop should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled Downshift element for the lifetime of the component. More info: https://github.com/downshift-js/downshift#control-props";
-    ['selectedItem', 'isOpen', 'inputValue', 'highlightedIndex'].forEach(function (propKey) {
-      if (prevProps[propKey] !== undefined && nextProps[propKey] === undefined) {
-        // eslint-disable-next-line no-console
-        console.error("downshift: A component has changed the controlled prop \"" + propKey + "\" to be uncontrolled. " + warningDescription);
-      } else if (prevProps[propKey] === undefined && nextProps[propKey] !== undefined) {
-        // eslint-disable-next-line no-console
-        console.error("downshift: A component has changed the uncontrolled prop \"" + propKey + "\" to be controlled. " + warningDescription);
-      }
-    });
-  }
-
   var dropdownDefaultStateValues = {
     highlightedIndex: -1,
     isOpen: false,
@@ -3064,6 +3072,16 @@
   function capitalizeString(string) {
     return "" + string.slice(0, 1).toUpperCase() + string.slice(1);
   }
+  function useLatestRef(val) {
+    var ref = react.useRef(val); // technically this is not "concurrent mode safe" because we're manipulating
+    // the value during render (so it's not idempotent). However, the places this
+    // hook is used is to support memoizing callbacks which will be called
+    // *during* render, so we need the latest values *during* render.
+    // If not for this, then we'd probably want to use useLayoutEffect instead.
+
+    ref.current = val;
+    return ref;
+  }
   /**
    * Computes the controlled state using a the previous state, props,
    * two reducers, one from downshift and an optional one from the user.
@@ -3082,7 +3100,7 @@
       actionRef.current = action;
       state = getState(state, action.props);
       var changes = reducer(state, action);
-      var newState = action.props.stateReducer(state, _extends(_extends({}, action), {}, {
+      var newState = action.props.stateReducer(state, _extends({}, action, {
         changes: changes
       }));
       return newState;
@@ -3092,6 +3110,12 @@
         state = _useReducer[0],
         dispatch = _useReducer[1];
 
+    var propsRef = useLatestRef(props);
+    var dispatchWithProps = react.useCallback(function (action) {
+      return dispatch(_extends({
+        props: propsRef.current
+      }, action));
+    }, [propsRef]);
     var action = actionRef.current;
     react.useEffect(function () {
       if (action && prevStateRef.current && prevStateRef.current !== state) {
@@ -3100,11 +3124,7 @@
 
       prevStateRef.current = state;
     }, [state, props, action]);
-    return [state, function dispatchWithProps(action) {
-      return dispatch(_extends({
-        props: props
-      }, action));
-    }];
+    return [state, dispatchWithProps];
   }
   /**
    * Wraps the useEnhancedReducer and applies the controlled prop values before
@@ -3180,7 +3200,12 @@
         initialHighlightedIndex = props.initialHighlightedIndex,
         defaultHighlightedIndex = props.defaultHighlightedIndex;
     var selectedItem = state.selectedItem,
-        highlightedIndex = state.highlightedIndex; // initialHighlightedIndex will give value to highlightedIndex on initial state only.
+        highlightedIndex = state.highlightedIndex;
+
+    if (items.length === 0) {
+      return -1;
+    } // initialHighlightedIndex will give value to highlightedIndex on initial state only.
+
 
     if (initialHighlightedIndex !== undefined && highlightedIndex === initialHighlightedIndex) {
       return initialHighlightedIndex;
@@ -3267,6 +3292,53 @@
     }, [isOpen, environment]);
     return mouseAndTouchTrackersRef;
   }
+  /**
+   * Custom hook that checks if getter props are called correctly.
+   * 
+   * @param  {...any} propKeys Getter prop names to be handled.
+   * @returns {Function} Setter function called inside getter props to set call information.
+   */
+
+  function useGetterPropsCalledChecker() {
+    for (var _len = arguments.length, propKeys = new Array(_len), _key = 0; _key < _len; _key++) {
+      propKeys[_key] = arguments[_key];
+    }
+
+    var getterPropsCalledRef = react.useRef(propKeys.reduce(function (acc, propKey) {
+      acc[propKey] = {};
+      return acc;
+    }, {}));
+    Object.keys(getterPropsCalledRef.current).forEach(function (propKey) {
+      getterPropsCalledRef.current[propKey] = null;
+    });
+    react.useEffect(function () {
+      Object.keys(getterPropsCalledRef.current).forEach(function (propKey) {
+        if (!getterPropsCalledRef.current[propKey]) {
+          // eslint-disable-next-line no-console
+          console.error("downshift: You forgot to call the " + propKey + " getter function on your component / element.");
+          return;
+        }
+
+        var _getterPropsCalledRef = getterPropsCalledRef.current[propKey],
+            suppressRefError = _getterPropsCalledRef.suppressRefError,
+            refKey = _getterPropsCalledRef.refKey,
+            elementRef = _getterPropsCalledRef.elementRef;
+
+        if ((!elementRef || !elementRef.current) && !suppressRefError) {
+          // eslint-disable-next-line no-console
+          console.error("downshift: The ref prop \"" + refKey + "\" from " + propKey + " was not applied correctly on your element.");
+        }
+      });
+    });
+    var setGetterPropCallInfo = react.useCallback(function (propKey, suppressRefError, refKey, elementRef) {
+      getterPropsCalledRef.current[propKey] = {
+        suppressRefError: suppressRefError,
+        refKey: refKey,
+        elementRef: elementRef
+      };
+    }, []);
+    return setGetterPropCallInfo;
+  }
 
   function getItemIndexByCharacterKey(keysSoFar, highlightedIndex, items, itemToStringParam, getItemNodeFromIndex) {
     var lowerCasedItemStrings = items.map(function (item) {
@@ -3362,7 +3434,7 @@
     return '';
   }
 
-  var defaultProps$1 = _extends(_extends({}, defaultProps), {}, {
+  var defaultProps$1 = _extends({}, defaultProps, {
     getA11yStatusMessage: getA11yStatusMessage$1
   });
 
@@ -3588,7 +3660,7 @@
         throw new Error('Reducer called without proper action type.');
     }
 
-    return _extends(_extends({}, state), changes);
+    return _extends({}, state, {}, changes);
   }
   /* eslint-enable complexity */
 
@@ -3603,7 +3675,7 @@
     /* istanbul ignore else */
     validatePropTypes(userProps); // Props defaults and destructuring.
 
-    var props = _extends(_extends({}, defaultProps$1), userProps);
+    var props = _extends({}, defaultProps$1, {}, userProps);
 
     var items = props.items,
         scrollIntoView = props.scrollIntoView,
@@ -3614,31 +3686,44 @@
         getA11ySelectionMessage = props.getA11ySelectionMessage,
         getA11yStatusMessage = props.getA11yStatusMessage; // Initial state depending on controlled props.
 
-    var initialState = getInitialState(props); // Reducer init.
+    var initialState = getInitialState(props);
 
     var _useControlledReducer = useControlledReducer(downshiftSelectReducer, initialState, props),
-        _useControlledReducer2 = _useControlledReducer[0],
-        isOpen = _useControlledReducer2.isOpen,
-        highlightedIndex = _useControlledReducer2.highlightedIndex,
-        selectedItem = _useControlledReducer2.selectedItem,
-        inputValue = _useControlledReducer2.inputValue,
-        dispatch = _useControlledReducer[1]; // Refs
+        state = _useControlledReducer[0],
+        dispatch = _useControlledReducer[1];
 
+    var isOpen = state.isOpen,
+        highlightedIndex = state.highlightedIndex,
+        selectedItem = state.selectedItem,
+        inputValue = state.inputValue; // Element efs.
 
     var toggleButtonRef = react.useRef(null);
     var menuRef = react.useRef(null);
-    var isInitialMountRef = react.useRef(true);
-    var shouldScrollRef = react.useRef(true);
-    var shouldBlurRef = react.useRef(true);
-    var clearTimeoutRef = react.useRef(null);
-    var elementIdsRef = react.useRef(getElementIds(props));
-    var previousResultCountRef = react.useRef(); // Some utils.
+    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.
+
+    var shouldBlurRef = react.useRef(true); // used to keep the inputValue clearTimeout object between renders.
+
+    var clearTimeoutRef = react.useRef(null); // prevent id re-generation between renders.
+
+    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 latest = useLatestRef({
+      state: state,
+      props: props
+    }); // Some utils.
 
     var getItemNodeFromIndex = function (index) {
-      return environment.document.getElementById(elementIdsRef.current.getItemId(index));
+      return itemRefs.current[elementIdsRef.current.getItemId(index)];
     }; // Effects.
-
-    /* Sets a11y status message on changes in state. */
+    // Sets a11y status message on changes in state.
 
 
     react.useEffect(function () {
@@ -3659,8 +3744,7 @@
           previousResultCount: previousResultCount
         });
       }, environment.document); // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isOpen, highlightedIndex, selectedItem, inputValue]);
-    /* Sets a11y status message on changes in selectedItem. */
+    }, [isOpen, highlightedIndex, selectedItem, inputValue]); // Sets a11y status message on changes in selectedItem.
 
     react.useEffect(function () {
       if (isInitialMountRef.current) {
@@ -3680,8 +3764,7 @@
           previousResultCount: previousResultCount
         });
       }, environment.document); // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [selectedItem]);
-    /* Sets cleanup for the keysSoFar after 500ms. */
+    }, [selectedItem]); // Sets cleanup for the keysSoFar after 500ms.
 
     react.useEffect(function () {
       // init the clean function here as we need access to dispatch.
@@ -3718,9 +3801,10 @@
         // istanbul ignore else
         if (menuRef.current) {
           menuRef.current.focus();
-          return;
         }
-      } // Focus toggleButton on close, but on if was closed with (Shift+)Tab.
+
+        return;
+      } // Focus toggleButton on close, but not if it was closed with (Shift+)Tab.
 
 
       if (environment.document.activeElement === menuRef.current) {
@@ -3731,11 +3815,10 @@
         }
       } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-    }, [isOpen]);
-    /* Scroll on highlighted item if change comes from keyboard. */
+    }, [isOpen]); // Scroll on highlighted item if change comes from keyboard.
 
     react.useEffect(function () {
-      if (highlightedIndex < 0 || !isOpen || !items.length) {
+      if (highlightedIndex < 0 || !isOpen || !Object.keys(itemRefs.current).length) {
         return;
       }
 
@@ -3753,286 +3836,322 @@
 
       previousResultCountRef.current = items.length;
     });
-    /* Make initial ref false. */
-
     react.useEffect(function () {
-      isInitialMountRef.current = false;
-    }, []);
-    /* Add mouse/touch events to document. */
+      if (isInitialMountRef.current) {
+        return;
+      }
+
+      validateControlledUnchanged(state, prevPropsRef.current, props);
+      prevPropsRef.current = props;
+    }, [state, props]); // Add mouse/touch events to document.
 
     var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [menuRef, toggleButtonRef], environment, function () {
       dispatch({
         type: MenuBlur
       });
-    }); // Event handler functions.
-
-    var toggleButtonKeyDownHandlers = {
-      ArrowDown: function ArrowDown(event) {
-        event.preventDefault();
-        dispatch({
-          type: ToggleButtonKeyDownArrowDown,
-          getItemNodeFromIndex: getItemNodeFromIndex,
-          shiftKey: event.shiftKey
-        });
-      },
-      ArrowUp: function ArrowUp(event) {
-        event.preventDefault();
-        dispatch({
-          type: ToggleButtonKeyDownArrowUp,
-          getItemNodeFromIndex: getItemNodeFromIndex,
-          shiftKey: event.shiftKey
-        });
-      }
-    };
-    var menuKeyDownHandlers = {
-      ArrowDown: function ArrowDown(event) {
-        event.preventDefault();
-        dispatch({
-          type: MenuKeyDownArrowDown,
-          getItemNodeFromIndex: getItemNodeFromIndex,
-          shiftKey: event.shiftKey
-        });
-      },
-      ArrowUp: function ArrowUp(event) {
-        event.preventDefault();
-        dispatch({
-          type: MenuKeyDownArrowUp,
-          getItemNodeFromIndex: getItemNodeFromIndex,
-          shiftKey: event.shiftKey
-        });
-      },
-      Home: function Home(event) {
-        event.preventDefault();
-        dispatch({
-          type: MenuKeyDownHome,
-          getItemNodeFromIndex: getItemNodeFromIndex
-        });
-      },
-      End: function End(event) {
-        event.preventDefault();
-        dispatch({
-          type: MenuKeyDownEnd,
-          getItemNodeFromIndex: getItemNodeFromIndex
-        });
-      },
-      Escape: function Escape() {
-        dispatch({
-          type: MenuKeyDownEscape
-        });
-      },
-      Enter: function Enter(event) {
-        event.preventDefault();
-        dispatch({
-          type: MenuKeyDownEnter
-        });
-      },
-      ' ': function _(event) {
-        event.preventDefault();
-        dispatch({
-          type: MenuKeyDownSpaceButton
-        });
-      }
-    }; // Event handlers.
-
-    var menuHandleKeyDown = function (event) {
-      var key = normalizeArrowKey(event);
-
-      if (key && menuKeyDownHandlers[key]) {
-        menuKeyDownHandlers[key](event);
-      } else if (isAcceptedCharacterKey(key)) {
-        dispatch({
-          type: MenuKeyDownCharacter,
-          key: key,
-          getItemNodeFromIndex: getItemNodeFromIndex
-        });
-      }
-    };
-
-    var menuHandleBlur = function () {
-      // if the blur was a result of selection, we don't trigger this action.
-      if (shouldBlurRef.current === false) {
-        shouldBlurRef.current = true;
-        return;
-      }
+    });
+    var setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps'); // Make initial ref false.
 
-      var shouldBlur = !mouseAndTouchTrackersRef.current.isMouseDown;
-      /* istanbul ignore else */
+    react.useEffect(function () {
+      isInitialMountRef.current = false;
+    }, []); // Event handler functions.
 
-      if (shouldBlur) {
-        dispatch({
-          type: MenuBlur
-        });
-      }
-    };
+    var toggleButtonKeyDownHandlers = react.useMemo(function () {
+      return {
+        ArrowDown: function ArrowDown(event) {
+          event.preventDefault();
+          dispatch({
+            type: ToggleButtonKeyDownArrowDown,
+            getItemNodeFromIndex: getItemNodeFromIndex,
+            shiftKey: event.shiftKey
+          });
+        },
+        ArrowUp: function ArrowUp(event) {
+          event.preventDefault();
+          dispatch({
+            type: ToggleButtonKeyDownArrowUp,
+            getItemNodeFromIndex: getItemNodeFromIndex,
+            shiftKey: event.shiftKey
+          });
+        }
+      };
+    }, [dispatch]);
+    var menuKeyDownHandlers = react.useMemo(function () {
+      return {
+        ArrowDown: function ArrowDown(event) {
+          event.preventDefault();
+          dispatch({
+            type: MenuKeyDownArrowDown,
+            getItemNodeFromIndex: getItemNodeFromIndex,
+            shiftKey: event.shiftKey
+          });
+        },
+        ArrowUp: function ArrowUp(event) {
+          event.preventDefault();
+          dispatch({
+            type: MenuKeyDownArrowUp,
+            getItemNodeFromIndex: getItemNodeFromIndex,
+            shiftKey: event.shiftKey
+          });
+        },
+        Home: function Home(event) {
+          event.preventDefault();
+          dispatch({
+            type: MenuKeyDownHome,
+            getItemNodeFromIndex: getItemNodeFromIndex
+          });
+        },
+        End: function End(event) {
+          event.preventDefault();
+          dispatch({
+            type: MenuKeyDownEnd,
+            getItemNodeFromIndex: getItemNodeFromIndex
+          });
+        },
+        Escape: function Escape() {
+          dispatch({
+            type: MenuKeyDownEscape
+          });
+        },
+        Enter: function Enter(event) {
+          event.preventDefault();
+          dispatch({
+            type: MenuKeyDownEnter
+          });
+        },
+        ' ': function _(event) {
+          event.preventDefault();
+          dispatch({
+            type: MenuKeyDownSpaceButton
+          });
+        }
+      };
+    }, [dispatch]); // Action functions.
 
-    var menuHandleMouseLeave = function () {
+    var toggleMenu = react.useCallback(function () {
       dispatch({
-        type: MenuMouseLeave
+        type: FunctionToggleMenu
       });
-    };
-
-    var toggleButtonHandleClick = function () {
+    }, [dispatch]);
+    var closeMenu = react.useCallback(function () {
       dispatch({
-        type: ToggleButtonClick
+        type: FunctionCloseMenu
       });
-    };
-
-    var toggleButtonHandleKeyDown = function (event) {
-      var key = normalizeArrowKey(event);
-
-      if (key && toggleButtonKeyDownHandlers[key]) {
-        toggleButtonKeyDownHandlers[key](event);
-      } else if (isAcceptedCharacterKey(key)) {
-        dispatch({
-          type: ToggleButtonKeyDownCharacter,
-          key: key,
-          getItemNodeFromIndex: getItemNodeFromIndex
-        });
-      }
-    };
-
-    var itemHandleMouseMove = function (index) {
-      if (index === highlightedIndex) {
-        return;
-      }
-
-      shouldScrollRef.current = false;
+    }, [dispatch]);
+    var openMenu = react.useCallback(function () {
       dispatch({
-        type: ItemMouseMove,
-        index: index
+        type: FunctionOpenMenu
       });
-    };
-
-    var itemHandleClick = function (index) {
+    }, [dispatch]);
+    var setHighlightedIndex = react.useCallback(function (newHighlightedIndex) {
+      dispatch({
+        type: FunctionSetHighlightedIndex,
+        highlightedIndex: newHighlightedIndex
+      });
+    }, [dispatch]);
+    var selectItem = react.useCallback(function (newSelectedItem) {
+      dispatch({
+        type: FunctionSelectItem,
+        selectedItem: newSelectedItem
+      });
+    }, [dispatch]);
+    var reset = react.useCallback(function () {
+      dispatch({
+        type: FunctionReset
+      });
+    }, [dispatch]);
+    var setInputValue = react.useCallback(function (newInputValue) {
       dispatch({
-        type: ItemClick,
-        index: index
+        type: FunctionSetInputValue,
+        inputValue: newInputValue
       });
-    }; // Action functions.
+    }, [dispatch]); // Getter functions.
 
+    var getLabelProps = react.useCallback(function (labelProps) {
+      return _extends({
+        id: elementIdsRef.current.labelId,
+        htmlFor: elementIdsRef.current.toggleButtonId
+      }, labelProps);
+    }, []);
+    var getMenuProps = react.useCallback(function (_temp, _temp2) {
+      var _extends2;
+
+      var _ref = _temp === void 0 ? {} : _temp,
+          onMouseLeave = _ref.onMouseLeave,
+          _ref$refKey = _ref.refKey,
+          refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey,
+          onKeyDown = _ref.onKeyDown,
+          onBlur = _ref.onBlur,
+          ref = _ref.ref,
+          rest = _objectWithoutPropertiesLoose(_ref, ["onMouseLeave", "refKey", "onKeyDown", "onBlur", "ref"]);
+
+      var _ref2 = _temp2 === void 0 ? {} : _temp2,
+          _ref2$suppressRefErro = _ref2.suppressRefError,
+          suppressRefError = _ref2$suppressRefErro === void 0 ? false : _ref2$suppressRefErro;
+
+      var latestState = latest.current.state;
+      setGetterPropCallInfo('getMenuProps', suppressRefError, refKey, menuRef);
+      return _extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (menuNode) {
+        menuRef.current = menuNode;
+      }), _extends2.id = elementIdsRef.current.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = elementIdsRef.current.labelId, _extends2.tabIndex = -1, _extends2), latestState.isOpen && latestState.highlightedIndex > -1 && {
+        'aria-activedescendant': elementIdsRef.current.getItemId(latestState.highlightedIndex)
+      }, {
+        onMouseLeave: callAllEventHandlers(onMouseLeave, function menuHandleMouseLeave() {
+          dispatch({
+            type: MenuMouseLeave
+          });
+        }),
+        onKeyDown: callAllEventHandlers(onKeyDown, function menuHandleKeyDown(event) {
+          var key = normalizeArrowKey(event);
 
-    return {
-      // prop getters.
-      getToggleButtonProps: function getToggleButtonProps(_temp2) {
-        var _extends3;
-
-        var _ref2 = _temp2 === void 0 ? {} : _temp2,
-            onClick = _ref2.onClick,
-            onKeyDown = _ref2.onKeyDown,
-            _ref2$refKey = _ref2.refKey,
-            refKey = _ref2$refKey === void 0 ? 'ref' : _ref2$refKey,
-            ref = _ref2.ref,
-            rest = _objectWithoutPropertiesLoose(_ref2, ["onClick", "onKeyDown", "refKey", "ref"]);
-
-        var toggleProps = _extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (toggleButtonNode) {
-          toggleButtonRef.current = toggleButtonNode;
-        }), _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);
-          toggleProps.onKeyDown = callAllEventHandlers(onKeyDown, toggleButtonHandleKeyDown);
-        }
+          if (key && menuKeyDownHandlers[key]) {
+            menuKeyDownHandlers[key](event);
+          } else if (isAcceptedCharacterKey(key)) {
+            dispatch({
+              type: MenuKeyDownCharacter,
+              key: key,
+              getItemNodeFromIndex: getItemNodeFromIndex
+            });
+          }
+        }),
+        onBlur: callAllEventHandlers(onBlur, function menuHandleBlur() {
+          // if the blur was a result of selection, we don't trigger this action.
+          if (shouldBlurRef.current === false) {
+            shouldBlurRef.current = true;
+            return;
+          }
 
-        return toggleProps;
-      },
-      getLabelProps: function getLabelProps(labelProps) {
-        return _extends({
-          id: elementIdsRef.current.labelId,
-          htmlFor: elementIdsRef.current.toggleButtonId
-        }, labelProps);
-      },
-      getMenuProps: function getMenuProps(_temp) {
-        var _extends2;
-
-        var _ref = _temp === void 0 ? {} : _temp,
-            onMouseLeave = _ref.onMouseLeave,
-            _ref$refKey = _ref.refKey,
-            refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey,
-            onKeyDown = _ref.onKeyDown,
-            onBlur = _ref.onBlur,
-            ref = _ref.ref,
-            rest = _objectWithoutPropertiesLoose(_ref, ["onMouseLeave", "refKey", "onKeyDown", "onBlur", "ref"]);
-
-        return _extends(_extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (menuNode) {
-          menuRef.current = menuNode;
-        }), _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),
-          onBlur: callAllEventHandlers(onBlur, menuHandleBlur)
-        }, rest);
-      },
-      getItemProps: function getItemProps(_temp3) {
-        var _ref3 = _temp3 === void 0 ? {} : _temp3,
-            item = _ref3.item,
-            index = _ref3.index,
-            onMouseMove = _ref3.onMouseMove,
-            onClick = _ref3.onClick,
-            rest = _objectWithoutPropertiesLoose(_ref3, ["item", "index", "onMouseMove", "onClick"]);
-
-        var itemIndex = getItemIndex(index, item, items);
-
-        if (itemIndex < 0) {
-          throw new Error('Pass either item or item index in getItemProps!');
-        }
+          var shouldBlur = !mouseAndTouchTrackersRef.current.isMouseDown;
+          /* istanbul ignore else */
 
-        var itemProps = _extends({
-          role: 'option',
-          'aria-selected': "" + (itemIndex === highlightedIndex),
-          id: elementIdsRef.current.getItemId(itemIndex)
-        }, rest);
+          if (shouldBlur) {
+            dispatch({
+              type: MenuBlur
+            });
+          }
+        })
+      }, rest);
+    }, [dispatch, latest, menuKeyDownHandlers, mouseAndTouchTrackersRef, setGetterPropCallInfo]);
+    var getToggleButtonProps = react.useCallback(function (_temp3, _temp4) {
+      var _extends3;
+
+      var _ref3 = _temp3 === void 0 ? {} : _temp3,
+          onClick = _ref3.onClick,
+          onKeyDown = _ref3.onKeyDown,
+          _ref3$refKey = _ref3.refKey,
+          refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey,
+          ref = _ref3.ref,
+          rest = _objectWithoutPropertiesLoose(_ref3, ["onClick", "onKeyDown", "refKey", "ref"]);
+
+      var _ref4 = _temp4 === void 0 ? {} : _temp4,
+          _ref4$suppressRefErro = _ref4.suppressRefError,
+          suppressRefError = _ref4$suppressRefErro === void 0 ? false : _ref4$suppressRefErro;
+
+      var toggleButtonHandleClick = function () {
+        dispatch({
+          type: ToggleButtonClick
+        });
+      };
 
-        if (!rest.disabled) {
-          itemProps.onMouseMove = callAllEventHandlers(onMouseMove, function () {
-            return itemHandleMouseMove(itemIndex);
-          });
-          itemProps.onClick = callAllEventHandlers(onClick, function () {
-            return itemHandleClick(itemIndex);
+      var toggleButtonHandleKeyDown = function (event) {
+        var key = normalizeArrowKey(event);
+
+        if (key && toggleButtonKeyDownHandlers[key]) {
+          toggleButtonKeyDownHandlers[key](event);
+        } else if (isAcceptedCharacterKey(key)) {
+          dispatch({
+            type: ToggleButtonKeyDownCharacter,
+            key: key,
+            getItemNodeFromIndex: getItemNodeFromIndex
           });
         }
+      };
 
-        return itemProps;
-      },
-      // actions.
-      toggleMenu: function toggleMenu() {
-        dispatch({
-          type: FunctionToggleMenu
-        });
-      },
-      openMenu: function openMenu() {
-        dispatch({
-          type: FunctionOpenMenu
-        });
-      },
-      closeMenu: function closeMenu() {
-        dispatch({
-          type: FunctionCloseMenu
-        });
-      },
-      setHighlightedIndex: function setHighlightedIndex(newHighlightedIndex) {
-        dispatch({
-          type: FunctionSetHighlightedIndex,
-          highlightedIndex: newHighlightedIndex
-        });
-      },
-      selectItem: function selectItem(newSelectedItem) {
-        dispatch({
-          type: FunctionSelectItem,
-          selectedItem: newSelectedItem
-        });
-      },
-      reset: function reset() {
+      var toggleProps = _extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (toggleButtonNode) {
+        toggleButtonRef.current = toggleButtonNode;
+      }), _extends3.id = elementIdsRef.current.toggleButtonId, _extends3['aria-haspopup'] = 'listbox', _extends3['aria-expanded'] = latest.current.state.isOpen, _extends3['aria-labelledby'] = elementIdsRef.current.labelId + " " + elementIdsRef.current.toggleButtonId, _extends3), rest);
+
+      if (!rest.disabled) {
+        toggleProps.onClick = callAllEventHandlers(onClick, toggleButtonHandleClick);
+        toggleProps.onKeyDown = callAllEventHandlers(onKeyDown, toggleButtonHandleKeyDown);
+      }
+
+      setGetterPropCallInfo('getToggleButtonProps', suppressRefError, refKey, toggleButtonRef);
+      return toggleProps;
+    }, [dispatch, latest, toggleButtonKeyDownHandlers, setGetterPropCallInfo]);
+    var getItemProps = react.useCallback(function (_temp5) {
+      var _extends4;
+
+      var _ref5 = _temp5 === void 0 ? {} : _temp5,
+          item = _ref5.item,
+          index = _ref5.index,
+          onMouseMove = _ref5.onMouseMove,
+          onClick = _ref5.onClick,
+          _ref5$refKey = _ref5.refKey,
+          refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey,
+          ref = _ref5.ref,
+          rest = _objectWithoutPropertiesLoose(_ref5, ["item", "index", "onMouseMove", "onClick", "refKey", "ref"]);
+
+      var _latest$current = latest.current,
+          latestState = _latest$current.state,
+          latestProps = _latest$current.props;
+
+      var itemHandleMouseMove = function () {
+        if (index === latestState.highlightedIndex) {
+          return;
+        }
+
+        shouldScrollRef.current = false;
         dispatch({
-          type: FunctionReset
+          type: ItemMouseMove,
+          index: index
         });
-      },
-      setInputValue: function setInputValue(newInputValue) {
+      };
+
+      var itemHandleClick = function () {
         dispatch({
-          type: FunctionSetInputValue,
-          inputValue: newInputValue
+          type: ItemClick,
+          index: index
         });
-      },
+      };
+
+      var itemIndex = getItemIndex(index, item, latestProps.items);
+
+      if (itemIndex < 0) {
+        throw new Error('Pass either item or item index in getItemProps!');
+      }
+
+      var itemProps = _extends((_extends4 = {
+        role: 'option',
+        'aria-selected': "" + (itemIndex === latestState.highlightedIndex),
+        id: elementIdsRef.current.getItemId(itemIndex)
+      }, _extends4[refKey] = handleRefs(ref, function (itemNode) {
+        if (itemNode) {
+          itemRefs.current[elementIdsRef.current.getItemId(itemIndex)] = itemNode;
+        }
+      }), _extends4), rest);
+
+      if (!rest.disabled) {
+        itemProps.onMouseMove = callAllEventHandlers(onMouseMove, itemHandleMouseMove);
+        itemProps.onClick = callAllEventHandlers(onClick, itemHandleClick);
+      }
+
+      return itemProps;
+    }, [dispatch, latest]);
+    return {
+      // prop getters.
+      getToggleButtonProps: getToggleButtonProps,
+      getLabelProps: getLabelProps,
+      getMenuProps: getMenuProps,
+      getItemProps: getItemProps,
+      // actions.
+      toggleMenu: toggleMenu,
+      openMenu: openMenu,
+      closeMenu: closeMenu,
+      setHighlightedIndex: setHighlightedIndex,
+      selectItem: selectItem,
+      reset: reset,
+      setInputValue: setInputValue,
       // state.
       highlightedIndex: highlightedIndex,
       isOpen: isOpen,
@@ -4107,7 +4226,7 @@
       inputValue = props.itemToString(selectedItem);
     }
 
-    return _extends(_extends({}, initialState), {}, {
+    return _extends({}, initialState, {
       inputValue: inputValue
     });
   }
@@ -4185,7 +4304,7 @@
 
     return [getState(state, props), dispatch];
   }
-  var defaultProps$2 = _extends(_extends({}, defaultProps), {}, {
+  var defaultProps$2 = _extends({}, defaultProps, {
     getA11yStatusMessage: getA11yStatusMessage,
     circularNavigation: true
   });
@@ -4325,7 +4444,8 @@
 
       case FunctionSelectItem$1:
         changes = {
-          selectedItem: action.selectedItem
+          selectedItem: action.selectedItem,
+          inputValue: props.itemToString(action.selectedItem)
         };
         break;
 
@@ -4349,7 +4469,7 @@
         throw new Error('Reducer called without proper action type.');
     }
 
-    return _extends(_extends({}, state), changes);
+    return _extends({}, state, {}, changes);
   }
   /* eslint-enable complexity */
 
@@ -4364,7 +4484,7 @@
     /* istanbul ignore else */
     validatePropTypes$1(userProps); // Props defaults and destructuring.
 
-    var props = _extends(_extends({}, defaultProps$2), userProps);
+    var props = _extends({}, defaultProps$2, {}, userProps);
 
     var initialIsOpen = props.initialIsOpen,
         defaultIsOpen = props.defaultIsOpen,
@@ -4375,37 +4495,47 @@
         getA11ySelectionMessage = props.getA11ySelectionMessage,
         itemToString = props.itemToString; // Initial state depending on controlled props.
 
-    var initialState = getInitialState$1(props); // Reducer init.
+    var initialState = getInitialState$1(props);
 
     var _useControlledReducer = useControlledReducer$1(downshiftUseComboboxReducer, initialState, props),
-        _useControlledReducer2 = _useControlledReducer[0],
-        isOpen = _useControlledReducer2.isOpen,
-        highlightedIndex = _useControlledReducer2.highlightedIndex,
-        selectedItem = _useControlledReducer2.selectedItem,
-        inputValue = _useControlledReducer2.inputValue,
+        state = _useControlledReducer[0],
         dispatch = _useControlledReducer[1];
-    /* Refs */
 
+    var isOpen = state.isOpen,
+        highlightedIndex = state.highlightedIndex,
+        selectedItem = state.selectedItem,
+        inputValue = state.inputValue; // Element refs.
 
     var menuRef = react.useRef(null);
+    var itemRefs = react.useRef();
     var inputRef = react.useRef(null);
     var toggleButtonRef = react.useRef(null);
     var comboboxRef = react.useRef(null);
-    var shouldScroll = react.useRef(true);
-    var isInitialMount = react.useRef(true);
-    var elementIds = react.useRef(getElementIds$1(props));
-    var previousResultCountRef = react.useRef();
+    itemRefs.current = {}; // used not to scroll on highlight by mouse.
 
-    var getItemNodeFromIndex = function (index) {
-      return props.environment.document.getElementById(elementIds.current.getItemId(index));
-    };
-    /* Effects */
+    var shouldScrollRef = react.useRef(true);
+    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); // used to store information about getter props being called on render.
+    // utility callback to get item element.
 
-    /* Sets a11y status message on changes in state. */
+    var latest = useLatestRef({
+      state: state,
+      props: props
+    });
+
+    var getItemNodeFromIndex = function (index) {
+      return itemRefs.current[elementIdsRef.current.getItemId(index)];
+    }; // Effects.
+    // Sets a11y status message on changes in state.
 
 
     react.useEffect(function () {
-      if (isInitialMount.current) {
+      if (isInitialMountRef.current) {
         return;
       }
 
@@ -4422,11 +4552,10 @@
           previousResultCount: previousResultCount
         });
       }, environment.document); // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isOpen, highlightedIndex, selectedItem, inputValue]);
-    /* Sets a11y status message on changes in selectedItem. */
+    }, [isOpen, highlightedIndex, selectedItem, inputValue]); // Sets a11y status message on changes in selectedItem.
 
     react.useEffect(function () {
-      if (isInitialMount.current) {
+      if (isInitialMountRef.current) {
         return;
       }
 
@@ -4443,26 +4572,24 @@
           previousResultCount: previousResultCount
         });
       }, environment.document); // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [selectedItem]);
-    /* Scroll on highlighted item if change comes from keyboard. */
+    }, [selectedItem]); // Scroll on highlighted item if change comes from keyboard.
 
     react.useEffect(function () {
-      if (highlightedIndex < 0 || !isOpen || !items.length) {
+      if (highlightedIndex < 0 || !isOpen || !Object.keys(itemRefs.current).length) {
         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]);
-    /* Controls the focus on the menu or the toggle button. */
+    }, [highlightedIndex]); // 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) {
           if (inputRef.current) {
@@ -4473,296 +4600,336 @@
 
     }, [isOpen]);
     react.useEffect(function () {
-      if (isInitialMount.current) {
+      if (isInitialMountRef.current) {
         return;
       }
 
       previousResultCountRef.current = items.length;
     });
     react.useEffect(function () {
-      isInitialMount.current = false;
-    }, []);
-    /* Add mouse/touch events to document. */
+      if (isInitialMountRef.current) {
+        return;
+      }
+
+      validateControlledUnchanged(state, prevPropsRef.current, props);
+      prevPropsRef.current = props;
+    }, [state, props]); // Add mouse/touch events to document.
 
     var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [comboboxRef, menuRef, toggleButtonRef], environment, function () {
       dispatch({
         type: InputBlur
       });
     });
+    var setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getComboboxProps', 'getMenuProps'); // Make initial ref false.
+
+    react.useEffect(function () {
+      isInitialMountRef.current = false;
+    }, []);
     /* Event handler functions */
 
-    var inputKeyDownHandlers = {
-      ArrowDown: function ArrowDown(event) {
-        event.preventDefault();
-        dispatch({
-          type: InputKeyDownArrowDown,
-          shiftKey: event.shiftKey,
-          getItemNodeFromIndex: getItemNodeFromIndex
-        });
-      },
-      ArrowUp: function ArrowUp(event) {
-        event.preventDefault();
+    var inputKeyDownHandlers = react.useMemo(function () {
+      return {
+        ArrowDown: function ArrowDown(event) {
+          event.preventDefault();
+          dispatch({
+            type: InputKeyDownArrowDown,
+            shiftKey: event.shiftKey,
+            getItemNodeFromIndex: getItemNodeFromIndex
+          });
+        },
+        ArrowUp: function ArrowUp(event) {
+          event.preventDefault();
+          dispatch({
+            type: InputKeyDownArrowUp,
+            shiftKey: event.shiftKey,
+            getItemNodeFromIndex: getItemNodeFromIndex
+          });
+        },
+        Home: function Home(event) {
+          event.preventDefault();
+          dispatch({
+            type: InputKeyDownHome,
+            getItemNodeFromIndex: getItemNodeFromIndex
+          });
+        },
+        End: function End(event) {
+          event.preventDefault();
+          dispatch({
+            type: InputKeyDownEnd,
+            getItemNodeFromIndex: getItemNodeFromIndex
+          });
+        },
+        Escape: function Escape() {
+          dispatch({
+            type: InputKeyDownEscape
+          });
+        },
+        Enter: function Enter(event) {
+          // if IME composing, wait for next Enter keydown event.
+          if (event.which === 229) {
+            return;
+          }
+
+          var latestState = latest.current.state;
+
+          if (latestState.isOpen && latestState.highlightedIndex > -1) {
+            event.preventDefault();
+            dispatch({
+              type: InputKeyDownEnter,
+              getItemNodeFromIndex: getItemNodeFromIndex
+            });
+          }
+        }
+      };
+    }, [dispatch, latest]); // Getter props.
+
+    var getLabelProps = react.useCallback(function (labelProps) {
+      return _extends({
+        id: elementIdsRef.current.labelId,
+        htmlFor: elementIdsRef.current.inputId
+      }, labelProps);
+    }, []);
+    var getMenuProps = react.useCallback(function (_temp, _temp2) {
+      var _extends2;
+
+      var _ref = _temp === void 0 ? {} : _temp,
+          onMouseLeave = _ref.onMouseLeave,
+          _ref$refKey = _ref.refKey,
+          refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey,
+          ref = _ref.ref,
+          rest = _objectWithoutPropertiesLoose(_ref, ["onMouseLeave", "refKey", "ref"]);
+
+      var _ref2 = _temp2 === void 0 ? {} : _temp2,
+          _ref2$suppressRefErro = _ref2.suppressRefError,
+          suppressRefError = _ref2$suppressRefErro === void 0 ? false : _ref2$suppressRefErro;
+
+      setGetterPropCallInfo('getMenuProps', suppressRefError, refKey, menuRef);
+      return _extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (menuNode) {
+        menuRef.current = menuNode;
+      }), _extends2.id = elementIdsRef.current.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = elementIdsRef.current.labelId, _extends2.onMouseLeave = callAllEventHandlers(onMouseLeave, function () {
         dispatch({
-          type: InputKeyDownArrowUp,
-          shiftKey: event.shiftKey,
-          getItemNodeFromIndex: getItemNodeFromIndex
+          type: MenuMouseLeave$1
         });
-      },
-      Home: function Home(event) {
-        event.preventDefault();
+      }), _extends2), rest);
+    }, [dispatch, setGetterPropCallInfo]);
+    var getItemProps = react.useCallback(function (_temp3) {
+      var _extends3, _ref4;
+
+      var _ref3 = _temp3 === void 0 ? {} : _temp3,
+          item = _ref3.item,
+          index = _ref3.index,
+          _ref3$refKey = _ref3.refKey,
+          refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey,
+          ref = _ref3.ref,
+          onMouseMove = _ref3.onMouseMove,
+          onClick = _ref3.onClick,
+          onPress = _ref3.onPress,
+          rest = _objectWithoutPropertiesLoose(_ref3, ["item", "index", "refKey", "ref", "onMouseMove", "onClick", "onPress"]);
+
+      var _latest$current = latest.current,
+          latestProps = _latest$current.props,
+          latestState = _latest$current.state;
+      var itemIndex = getItemIndex(index, item, latestProps.items);
+
+      if (itemIndex < 0) {
+        throw new Error('Pass either item or item index in getItemProps!');
+      }
+
+      var onSelectKey = 'onClick';
+      var customClickHandler = onClick;
+      return _extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (itemNode) {
+        if (itemNode) {
+          itemRefs.current[elementIdsRef.current.getItemId(itemIndex)] = itemNode;
+        }
+      }), _extends3.role = 'option', _extends3['aria-selected'] = "" + (itemIndex === latestState.highlightedIndex), _extends3.id = elementIdsRef.current.getItemId(itemIndex), _extends3), !rest.disabled && (_ref4 = {
+        onMouseMove: callAllEventHandlers(onMouseMove, function itemHandleMouseMove() {
+          if (index === latestState.highlightedIndex) {
+            return;
+          }
+
+          shouldScrollRef.current = false;
+          dispatch({
+            type: ItemMouseMove$1,
+            index: index
+          });
+        })
+      }, _ref4[onSelectKey] = callAllEventHandlers(customClickHandler, function itemHandleClick() {
         dispatch({
-          type: InputKeyDownHome,
-          getItemNodeFromIndex: getItemNodeFromIndex
+          type: ItemClick$1,
+          index: index
         });
-      },
-      End: function End(event) {
-        event.preventDefault();
+      }), _ref4), {}, rest);
+    }, [dispatch, latest]);
+    var getToggleButtonProps = react.useCallback(function (_temp4) {
+      var _extends4;
+
+      var _ref5 = _temp4 === void 0 ? {} : _temp4,
+          onClick = _ref5.onClick,
+          onPress = _ref5.onPress,
+          _ref5$refKey = _ref5.refKey,
+          refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey,
+          ref = _ref5.ref,
+          rest = _objectWithoutPropertiesLoose(_ref5, ["onClick", "onPress", "refKey", "ref"]);
+
+      var toggleButtonHandleClick = function () {
         dispatch({
-          type: InputKeyDownEnd,
-          getItemNodeFromIndex: getItemNodeFromIndex
+          type: ToggleButtonClick$1
         });
-      },
-      Escape: function Escape() {
+
+        if (!latest.current.state.isOpen && inputRef.current) {
+          inputRef.current.focus();
+        }
+      };
+
+      return _extends((_extends4 = {}, _extends4[refKey] = handleRefs(ref, function (toggleButtonNode) {
+        toggleButtonRef.current = toggleButtonNode;
+      }), _extends4.id = elementIdsRef.current.toggleButtonId, _extends4.tabIndex = -1, _extends4), !rest.disabled && _extends({}, {
+        onClick: callAllEventHandlers(onClick, toggleButtonHandleClick)
+      }), {}, rest);
+    }, [dispatch, latest]);
+    var getInputProps = react.useCallback(function (_temp5, _temp6) {
+      var _extends5;
+
+      var _ref6 = _temp5 === void 0 ? {} : _temp5,
+          onKeyDown = _ref6.onKeyDown,
+          onChange = _ref6.onChange,
+          onInput = _ref6.onInput,
+          onBlur = _ref6.onBlur,
+          onChangeText = _ref6.onChangeText,
+          _ref6$refKey = _ref6.refKey,
+          refKey = _ref6$refKey === void 0 ? 'ref' : _ref6$refKey,
+          ref = _ref6.ref,
+          rest = _objectWithoutPropertiesLoose(_ref6, ["onKeyDown", "onChange", "onInput", "onBlur", "onChangeText", "refKey", "ref"]);
+
+      var _ref7 = _temp6 === void 0 ? {} : _temp6,
+          _ref7$suppressRefErro = _ref7.suppressRefError,
+          suppressRefError = _ref7$suppressRefErro === void 0 ? false : _ref7$suppressRefErro;
+
+      setGetterPropCallInfo('getInputProps', suppressRefError, refKey, inputRef);
+      var latestState = latest.current.state;
+
+      var inputHandleKeyDown = function (event) {
+        var key = normalizeArrowKey(event);
+
+        if (key && inputKeyDownHandlers[key]) {
+          inputKeyDownHandlers[key](event);
+        }
+      };
+
+      var inputHandleChange = function (event) {
         dispatch({
-          type: InputKeyDownEscape
+          type: InputChange,
+          inputValue: event.target.value
         });
-      },
-      Enter: function Enter(event) {
-        // if IME composing, wait for next Enter keydown event.
-        if (event.which === 229) {
-          return;
-        }
+      };
 
-        if (isOpen && highlightedIndex > -1) {
-          event.preventDefault();
+      var inputHandleBlur = function () {
+        /* istanbul ignore else */
+        if (!mouseAndTouchTrackersRef.current.isMouseDown) {
           dispatch({
-            type: InputKeyDownEnter,
-            getItemNodeFromIndex: getItemNodeFromIndex
+            type: InputBlur
           });
         }
-      }
-    }; // Event handlers.
+      };
+      /* istanbul ignore next (preact) */
 
-    var inputHandleKeyDown = function (event) {
-      var key = normalizeArrowKey(event);
 
-      if (key && inputKeyDownHandlers[key]) {
-        inputKeyDownHandlers[key](event);
-      }
-    };
+      var onChangeKey = 'onChange';
+      var eventHandlers = {};
 
-    var inputHandleChange = function (event) {
-      dispatch({
-        type: InputChange,
-        inputValue: event.target.value
-      });
-    };
+      if (!rest.disabled) {
+        var _eventHandlers;
 
-    var inputHandleBlur = function () {
-      /* istanbul ignore else */
-      if (!mouseAndTouchTrackersRef.current.isMouseDown) {
-        dispatch({
-          type: InputBlur
-        });
+        eventHandlers = (_eventHandlers = {}, _eventHandlers[onChangeKey] = callAllEventHandlers(onChange, onInput, inputHandleChange), _eventHandlers.onKeyDown = callAllEventHandlers(onKeyDown, inputHandleKeyDown), _eventHandlers.onBlur = callAllEventHandlers(onBlur, inputHandleBlur), _eventHandlers);
       }
-    };
-
-    var menuHandleMouseLeave = function () {
+      /* istanbul ignore if (react-native) */
+
+
+      return _extends((_extends5 = {}, _extends5[refKey] = handleRefs(ref, function (inputNode) {
+        inputRef.current = inputNode;
+      }), _extends5.id = elementIdsRef.current.inputId, _extends5['aria-autocomplete'] = 'list', _extends5['aria-controls'] = elementIdsRef.current.menuId, _extends5), latestState.isOpen && latestState.highlightedIndex > -1 && {
+        'aria-activedescendant': elementIdsRef.current.getItemId(latestState.highlightedIndex)
+      }, {
+        'aria-labelledby': elementIdsRef.current.labelId,
+        // https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
+        // revert back since autocomplete="nope" is ignored on latest Chrome and Opera
+        autoComplete: 'off',
+        value: latestState.inputValue
+      }, eventHandlers, {}, rest);
+    }, [dispatch, inputKeyDownHandlers, latest, mouseAndTouchTrackersRef, setGetterPropCallInfo]);
+    var getComboboxProps = react.useCallback(function (_temp7, _temp8) {
+      var _extends6;
+
+      var _ref8 = _temp7 === void 0 ? {} : _temp7,
+          _ref8$refKey = _ref8.refKey,
+          refKey = _ref8$refKey === void 0 ? 'ref' : _ref8$refKey,
+          ref = _ref8.ref,
+          rest = _objectWithoutPropertiesLoose(_ref8, ["refKey", "ref"]);
+
+      var _ref9 = _temp8 === void 0 ? {} : _temp8,
+          _ref9$suppressRefErro = _ref9.suppressRefError,
+          suppressRefError = _ref9$suppressRefErro === void 0 ? false : _ref9$suppressRefErro;
+
+      setGetterPropCallInfo('getComboboxProps', suppressRefError, refKey, comboboxRef);
+      return _extends((_extends6 = {}, _extends6[refKey] = handleRefs(ref, function (comboboxNode) {
+        comboboxRef.current = comboboxNode;
+      }), _extends6.role = 'combobox', _extends6['aria-haspopup'] = 'listbox', _extends6['aria-owns'] = elementIdsRef.current.menuId, _extends6['aria-expanded'] = latest.current.state.isOpen, _extends6), rest);
+    }, [latest, setGetterPropCallInfo]); // returns
+
+    var toggleMenu = react.useCallback(function () {
       dispatch({
-        type: MenuMouseLeave$1
+        type: FunctionToggleMenu$1
       });
-    };
-
-    var itemHandleMouseMove = function (index) {
-      if (index === highlightedIndex) {
-        return;
-      }
-
-      shouldScroll.current = false;
+    }, [dispatch]);
+    var closeMenu = react.useCallback(function () {
       dispatch({
-        type: ItemMouseMove$1,
-        index: index
+        type: FunctionCloseMenu$1
       });
-    };
-
-    var itemHandleClick = function (index) {
+    }, [dispatch]);
+    var openMenu = react.useCallback(function () {
       dispatch({
-        type: ItemClick$1,
-        index: index
+        type: FunctionOpenMenu$1
       });
-    };
-
-    var toggleButtonHandleClick = function () {
+    }, [dispatch]);
+    var setHighlightedIndex = react.useCallback(function (newHighlightedIndex) {
       dispatch({
-        type: ToggleButtonClick$1
+        type: FunctionSetHighlightedIndex$1,
+        highlightedIndex: newHighlightedIndex
       });
-
-      if (!isOpen && inputRef.current) {
-        inputRef.current.focus();
-      }
-    }; // Getter props.
-
-
+    }, [dispatch]);
+    var selectItem = react.useCallback(function (newSelectedItem) {
+      dispatch({
+        type: FunctionSelectItem$1,
+        selectedItem: newSelectedItem
+      });
+    }, [dispatch]);
+    var setInputValue = react.useCallback(function (newInputValue) {
+      dispatch({
+        type: FunctionSetInputValue$1,
+        inputValue: newInputValue
+      });
+    }, [dispatch]);
+    var reset = react.useCallback(function () {
+      dispatch({
+        type: FunctionReset$1
+      });
+    }, [dispatch]);
     return {
       // prop getters.
-      getItemProps: function getItemProps(_temp2) {
-        var _ref3;
-
-        var _ref2 = _temp2 === void 0 ? {} : _temp2,
-            item = _ref2.item,
-            index = _ref2.index,
-            onMouseMove = _ref2.onMouseMove,
-            onClick = _ref2.onClick,
-            onPress = _ref2.onPress,
-            rest = _objectWithoutPropertiesLoose(_ref2, ["item", "index", "onMouseMove", "onClick", "onPress"]);
-
-        var itemIndex = getItemIndex(index, item, items);
-
-        if (itemIndex < 0) {
-          throw new Error('Pass either item or item index in getItemProps!');
-        }
-
-        var onSelectKey = 'onClick';
-        var customClickHandler = onClick;
-        return _extends(_extends({
-          role: 'option',
-          'aria-selected': "" + (itemIndex === highlightedIndex),
-          id: elementIds.current.getItemId(itemIndex)
-        }, !rest.disabled && (_ref3 = {
-          onMouseMove: callAllEventHandlers(onMouseMove, function () {
-            itemHandleMouseMove(itemIndex);
-          })
-        }, _ref3[onSelectKey] = callAllEventHandlers(customClickHandler, function () {
-          itemHandleClick(itemIndex);
-        }), _ref3)), rest);
-      },
-      getLabelProps: function getLabelProps(labelProps) {
-        return _extends({
-          id: elementIds.current.labelId,
-          htmlFor: elementIds.current.inputId
-        }, labelProps);
-      },
-      getMenuProps: function getMenuProps(_temp) {
-        var _extends2;
-
-        var _ref = _temp === void 0 ? {} : _temp,
-            onMouseLeave = _ref.onMouseLeave,
-            _ref$refKey = _ref.refKey,
-            refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey,
-            ref = _ref.ref,
-            rest = _objectWithoutPropertiesLoose(_ref, ["onMouseLeave", "refKey", "ref"]);
-
-        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.onMouseLeave = callAllEventHandlers(onMouseLeave, menuHandleMouseLeave), _extends2), rest);
-      },
-      getInputProps: function getInputProps(_temp4) {
-        var _extends4;
-
-        var _ref5 = _temp4 === void 0 ? {} : _temp4,
-            onKeyDown = _ref5.onKeyDown,
-            onChange = _ref5.onChange,
-            onInput = _ref5.onInput,
-            onBlur = _ref5.onBlur,
-            onChangeText = _ref5.onChangeText,
-            _ref5$refKey = _ref5.refKey,
-            refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey,
-            ref = _ref5.ref,
-            rest = _objectWithoutPropertiesLoose(_ref5, ["onKeyDown", "onChange", "onInput", "onBlur", "onChangeText", "refKey", "ref"]);
-
-        /* istanbul ignore next (preact) */
-        var onChangeKey = 'onChange';
-        var eventHandlers = {};
-
-        if (!rest.disabled) {
-          var _eventHandlers;
-
-          eventHandlers = (_eventHandlers = {}, _eventHandlers[onChangeKey] = callAllEventHandlers(onChange, onInput, inputHandleChange), _eventHandlers.onKeyDown = callAllEventHandlers(onKeyDown, inputHandleKeyDown), _eventHandlers.onBlur = callAllEventHandlers(onBlur, inputHandleBlur), _eventHandlers);
-        }
-        /* istanbul ignore if (react-native) */
-
-
-        return _extends(_extends(_extends((_extends4 = {}, _extends4[refKey] = handleRefs(ref, function (inputNode) {
-          inputRef.current = inputNode;
-        }), _extends4.id = elementIds.current.inputId, _extends4['aria-autocomplete'] = 'list', _extends4['aria-controls'] = elementIds.current.menuId, _extends4), isOpen && highlightedIndex > -1 && {
-          'aria-activedescendant': elementIds.current.getItemId(highlightedIndex)
-        }), {}, {
-          'aria-labelledby': elementIds.current.labelId,
-          // https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
-          // revert back since autocomplete="nope" is ignored on latest Chrome and Opera
-          autoComplete: 'off',
-          value: inputValue
-        }, eventHandlers), rest);
-      },
-      getComboboxProps: function getComboboxProps(_temp5) {
-        var _extends5;
-
-        var _ref6 = _temp5 === void 0 ? {} : _temp5,
-            _ref6$refKey = _ref6.refKey,
-            refKey = _ref6$refKey === void 0 ? 'ref' : _ref6$refKey,
-            ref = _ref6.ref,
-            rest = _objectWithoutPropertiesLoose(_ref6, ["refKey", "ref"]);
-
-        return _extends((_extends5 = {}, _extends5[refKey] = handleRefs(ref, function (comboboxNode) {
-          comboboxRef.current = comboboxNode;
-        }), _extends5.role = 'combobox', _extends5['aria-haspopup'] = 'listbox', _extends5['aria-owns'] = elementIds.current.menuId, _extends5['aria-expanded'] = isOpen, _extends5), rest);
-      },
-      getToggleButtonProps: function getToggleButtonProps(_temp3) {
-        var _extends3;
-
-        var _ref4 = _temp3 === void 0 ? {} : _temp3,
-            onClick = _ref4.onClick,
-            onPress = _ref4.onPress,
-            _ref4$refKey = _ref4.refKey,
-            refKey = _ref4$refKey === void 0 ? 'ref' : _ref4$refKey,
-            ref = _ref4.ref,
-            rest = _objectWithoutPropertiesLoose(_ref4, ["onClick", "onPress", "refKey", "ref"]);
-
-        return _extends(_extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (toggleButtonNode) {
-          toggleButtonRef.current = toggleButtonNode;
-        }), _extends3.id = elementIds.current.toggleButtonId, _extends3.tabIndex = -1, _extends3), !rest.disabled && _extends({}, {
-          onClick: callAllEventHandlers(onClick, toggleButtonHandleClick)
-        })), rest);
-      },
+      getItemProps: getItemProps,
+      getLabelProps: getLabelProps,
+      getMenuProps: getMenuProps,
+      getInputProps: getInputProps,
+      getComboboxProps: getComboboxProps,
+      getToggleButtonProps: getToggleButtonProps,
       // actions.
-      toggleMenu: function toggleMenu() {
-        dispatch({
-          type: FunctionToggleMenu$1
-        });
-      },
-      openMenu: function openMenu() {
-        dispatch({
-          type: FunctionOpenMenu$1
-        });
-      },
-      closeMenu: function closeMenu() {
-        dispatch({
-          type: FunctionCloseMenu$1
-        });
-      },
-      setHighlightedIndex: function setHighlightedIndex(newHighlightedIndex) {
-        dispatch({
-          type: FunctionSetHighlightedIndex$1,
-          highlightedIndex: newHighlightedIndex
-        });
-      },
-      setInputValue: function setInputValue(newInputValue) {
-        dispatch({
-          type: FunctionSetInputValue$1,
-          inputValue: newInputValue
-        });
-      },
-      selectItem: function selectItem(newSelectedItem) {
-        dispatch({
-          type: FunctionSelectItem$1,
-          selectedItem: newSelectedItem
-        });
-      },
-      reset: function reset() {
-        dispatch({
-          type: FunctionReset$1
-        });
-      },
+      toggleMenu: toggleMenu,
+      openMenu: openMenu,
+      closeMenu: closeMenu,
+      setHighlightedIndex: setHighlightedIndex,
+      setInputValue: setInputValue,
+      selectItem: selectItem,
+      reset: reset,
       // state.
       highlightedIndex: highlightedIndex,
       isOpen: isOpen,
@@ -5041,20 +5208,18 @@
         throw new Error('Reducer called without proper action type.');
     }
 
-    return _extends(_extends({}, state), changes);
+    return _extends({}, state, {}, changes);
   }
 
   useMultipleSelection.stateChangeTypes = stateChangeTypes$3;
 
   function useMultipleSelection(userProps) {
-    var _selectedItemKeyDownH, _dropdownKeyDownHandl;
-
     if (userProps === void 0) {
       userProps = {};
     }
 
     // Props defaults and destructuring.
-    var props = _extends(_extends({}, defaultProps$3), userProps);
+    var props = _extends({}, defaultProps$3, {}, userProps);
 
     var getA11yRemovalMessage = props.getA11yRemovalMessage,
         itemToString = props.itemToString,
@@ -5063,22 +5228,28 @@
         keyNavigationPrevious = props.keyNavigationPrevious; // Reducer init.
 
     var _useControlledReducer = useControlledReducer(downshiftMultipleSelectionReducer, getInitialState$2(props), props),
-        _useControlledReducer2 = _useControlledReducer[0],
-        activeIndex = _useControlledReducer2.activeIndex,
-        selectedItems = _useControlledReducer2.selectedItems,
-        dispatch = _useControlledReducer[1]; // Refs.
+        state = _useControlledReducer[0],
+        dispatch = _useControlledReducer[1];
 
+    var activeIndex = state.activeIndex,
+        selectedItems = state.selectedItems; // Refs.
 
-    var isInitialMount = react.useRef(true);
+    var isInitialMountRef = react.useRef(true);
     var dropdownRef = react.useRef(null);
     var previousSelectedItemsRef = react.useRef(selectedItems);
     var selectedItemRefs = react.useRef();
-    selectedItemRefs.current = []; // Effects.
+    selectedItemRefs.current = []; // used for checking when props are moving from controlled to uncontrolled.
+
+    var prevPropsRef = react.useRef(props);
+    var latest = useLatestRef({
+      state: state,
+      props: props
+    }); // Effects.
 
     /* Sets a11y status message on changes in selectedItem. */
 
     react.useEffect(function () {
-      if (isInitialMount.current) {
+      if (isInitialMountRef.current) {
         return;
       }
 
@@ -5099,7 +5270,7 @@
     }, [selectedItems.length]); // Sets focus on active item.
 
     react.useEffect(function () {
-      if (isInitialMount.current) {
+      if (isInitialMountRef.current) {
         return;
       }
 
@@ -5108,152 +5279,172 @@
       } else if (selectedItemRefs.current[activeIndex]) {
         selectedItemRefs.current[activeIndex].focus();
       }
-    }, [activeIndex]); // Make initial ref false.
-
+    }, [activeIndex]);
     react.useEffect(function () {
-      isInitialMount.current = false;
-    }, []); // Event handler functions.
-
-    var selectedItemKeyDownHandlers = (_selectedItemKeyDownH = {}, _selectedItemKeyDownH[keyNavigationPrevious] = function () {
-      dispatch({
-        type: SelectedItemKeyDownNavigationPrevious
-      });
-    }, _selectedItemKeyDownH[keyNavigationNext] = function () {
-      dispatch({
-        type: SelectedItemKeyDownNavigationNext
-      });
-    }, _selectedItemKeyDownH.Delete = function Delete() {
-      dispatch({
-        type: SelectedItemKeyDownDelete
-      });
-    }, _selectedItemKeyDownH.Backspace = function Backspace() {
-      dispatch({
-        type: SelectedItemKeyDownBackspace
-      });
-    }, _selectedItemKeyDownH);
-    var dropdownKeyDownHandlers = (_dropdownKeyDownHandl = {}, _dropdownKeyDownHandl[keyNavigationPrevious] = function (event) {
-      if (isKeyDownOperationPermitted(event)) {
-        dispatch({
-          type: DropdownKeyDownNavigationPrevious
-        });
-      }
-    }, _dropdownKeyDownHandl.Backspace = function Backspace(event) {
-      if (isKeyDownOperationPermitted(event)) {
-        dispatch({
-          type: DropdownKeyDownBackspace
-        });
-      }
-    }, _dropdownKeyDownHandl); // Event handlers.
-
-    var selectedItemHandleClick = function (index) {
-      dispatch({
-        type: SelectedItemClick,
-        index: index
-      });
-    };
-
-    var selectedItemHandleKeyDown = function (event) {
-      var key = normalizeArrowKey(event);
-
-      if (key && selectedItemKeyDownHandlers[key]) {
-        selectedItemKeyDownHandlers[key](event);
-      }
-    };
-
-    var dropdownHandleKeyDown = function (event) {
-      var key = normalizeArrowKey(event);
-
-      if (key && dropdownKeyDownHandlers[key]) {
-        dropdownKeyDownHandlers[key](event);
+      if (isInitialMountRef.current) {
+        return;
       }
-    };
 
-    var dropdownHandleClick = function () {
-      dispatch({
-        type: DropdownClick
-      });
-    }; // Getter props.
+      validateControlledUnchanged(state, prevPropsRef.current, props);
+      prevPropsRef.current = props;
+    }, [state, props]);
+    var setGetterPropCallInfo = useGetterPropsCalledChecker('getDropdownProps'); // Make initial ref false.
 
+    react.useEffect(function () {
+      isInitialMountRef.current = false;
+    }, []); // Event handler functions.
 
-    return {
-      getSelectedItemProps: function getSelectedItemProps(_temp) {
-        var _extends2;
-
-        var _ref = _temp === void 0 ? {} : _temp,
-            _ref$refKey = _ref.refKey,
-            refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey,
-            ref = _ref.ref,
-            onClick = _ref.onClick,
-            onKeyDown = _ref.onKeyDown,
-            selectedItem = _ref.selectedItem,
-            index = _ref.index,
-            rest = _objectWithoutPropertiesLoose(_ref, ["refKey", "ref", "onClick", "onKeyDown", "selectedItem", "index"]);
-
-        var itemIndex = getItemIndex(index, selectedItem, selectedItems);
-
-        if (itemIndex < 0) {
-          throw new Error('Pass either selectedItem or index in getSelectedItemProps!');
-        }
+    var selectedItemKeyDownHandlers = react.useMemo(function () {
+      var _ref;
 
-        return _extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (selectedItemNode) {
-          if (selectedItemNode) {
-            selectedItemRefs.current.push(selectedItemNode);
-          }
-        }), _extends2.tabIndex = index === activeIndex ? 0 : -1, _extends2.onClick = callAllEventHandlers(onClick, function () {
-          selectedItemHandleClick(index);
-        }), _extends2.onKeyDown = callAllEventHandlers(onKeyDown, selectedItemHandleKeyDown), _extends2), rest);
-      },
-      getDropdownProps: function getDropdownProps(_temp2) {
-        var _extends3;
-
-        var _ref2 = _temp2 === void 0 ? {} : _temp2,
-            _ref2$refKey = _ref2.refKey,
-            refKey = _ref2$refKey === void 0 ? 'ref' : _ref2$refKey,
-            ref = _ref2.ref,
-            onKeyDown = _ref2.onKeyDown,
-            onClick = _ref2.onClick,
-            _ref2$preventKeyActio = _ref2.preventKeyAction,
-            preventKeyAction = _ref2$preventKeyActio === void 0 ? false : _ref2$preventKeyActio,
-            rest = _objectWithoutPropertiesLoose(_ref2, ["refKey", "ref", "onKeyDown", "onClick", "preventKeyAction"]);
-
-        return _extends(_extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (dropdownNode) {
-          if (dropdownNode) {
-            dropdownRef.current = dropdownNode;
-          }
-        }), _extends3), !preventKeyAction && {
-          onKeyDown: callAllEventHandlers(onKeyDown, dropdownHandleKeyDown),
-          onClick: callAllEventHandlers(onClick, dropdownHandleClick)
-        }), rest);
-      },
-      addSelectedItem: function addSelectedItem(selectedItem) {
+      return _ref = {}, _ref[keyNavigationPrevious] = function () {
         dispatch({
-          type: FunctionAddSelectedItem,
-          selectedItem: selectedItem
+          type: SelectedItemKeyDownNavigationPrevious
         });
-      },
-      removeSelectedItem: function removeSelectedItem(selectedItem) {
+      }, _ref[keyNavigationNext] = function () {
         dispatch({
-          type: FunctionRemoveSelectedItem,
-          selectedItem: selectedItem
+          type: SelectedItemKeyDownNavigationNext
         });
-      },
-      setSelectedItems: function setSelectedItems(newSelectedItems) {
+      }, _ref.Delete = function Delete() {
         dispatch({
-          type: FunctionSetSelectedItems,
-          selectedItems: newSelectedItems
+          type: SelectedItemKeyDownDelete
         });
-      },
-      setActiveIndex: function setActiveIndex(newActiveIndex) {
+      }, _ref.Backspace = function Backspace() {
         dispatch({
-          type: FunctionSetActiveIndex,
-          activeIndex: newActiveIndex
+          type: SelectedItemKeyDownBackspace
         });
-      },
-      reset: function reset() {
+      }, _ref;
+    }, [dispatch, keyNavigationNext, keyNavigationPrevious]);
+    var dropdownKeyDownHandlers = react.useMemo(function () {
+      var _ref2;
+
+      return _ref2 = {}, _ref2[keyNavigationPrevious] = function (event) {
+        if (isKeyDownOperationPermitted(event)) {
+          dispatch({
+            type: DropdownKeyDownNavigationPrevious
+          });
+        }
+      }, _ref2.Backspace = function Backspace(event) {
+        if (isKeyDownOperationPermitted(event)) {
+          dispatch({
+            type: DropdownKeyDownBackspace
+          });
+        }
+      }, _ref2;
+    }, [dispatch, keyNavigationPrevious]); // Getter props.
+
+    var getSelectedItemProps = react.useCallback(function (_temp) {
+      var _extends2;
+
+      var _ref3 = _temp === void 0 ? {} : _temp,
+          _ref3$refKey = _ref3.refKey,
+          refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey,
+          ref = _ref3.ref,
+          onClick = _ref3.onClick,
+          onKeyDown = _ref3.onKeyDown,
+          selectedItem = _ref3.selectedItem,
+          index = _ref3.index,
+          rest = _objectWithoutPropertiesLoose(_ref3, ["refKey", "ref", "onClick", "onKeyDown", "selectedItem", "index"]);
+
+      var latestState = latest.current.state;
+      var itemIndex = getItemIndex(index, selectedItem, latestState.selectedItems);
+
+      if (itemIndex < 0) {
+        throw new Error('Pass either selectedItem or index in getSelectedItemProps!');
+      }
+
+      return _extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (selectedItemNode) {
+        if (selectedItemNode) {
+          selectedItemRefs.current.push(selectedItemNode);
+        }
+      }), _extends2.tabIndex = index === latestState.activeIndex ? 0 : -1, _extends2.onClick = callAllEventHandlers(onClick, function selectedItemHandleClick() {
         dispatch({
-          type: FunctionReset$2
+          type: SelectedItemClick,
+          index: index
         });
-      },
+      }), _extends2.onKeyDown = callAllEventHandlers(onKeyDown, function selectedItemHandleKeyDown(event) {
+        var key = normalizeArrowKey(event);
+
+        if (key && selectedItemKeyDownHandlers[key]) {
+          selectedItemKeyDownHandlers[key](event);
+        }
+      }), _extends2), rest);
+    }, [dispatch, latest, selectedItemKeyDownHandlers]);
+    var getDropdownProps = react.useCallback(function (_temp2, _temp3) {
+      var _extends3;
+
+      var _ref4 = _temp2 === void 0 ? {} : _temp2,
+          _ref4$refKey = _ref4.refKey,
+          refKey = _ref4$refKey === void 0 ? 'ref' : _ref4$refKey,
+          ref = _ref4.ref,
+          onKeyDown = _ref4.onKeyDown,
+          onClick = _ref4.onClick,
+          _ref4$preventKeyActio = _ref4.preventKeyAction,
+          preventKeyAction = _ref4$preventKeyActio === void 0 ? false : _ref4$preventKeyActio,
+          rest = _objectWithoutPropertiesLoose(_ref4, ["refKey", "ref", "onKeyDown", "onClick", "preventKeyAction"]);
+
+      var _ref5 = _temp3 === void 0 ? {} : _temp3,
+          _ref5$suppressRefErro = _ref5.suppressRefError,
+          suppressRefError = _ref5$suppressRefErro === void 0 ? false : _ref5$suppressRefErro;
+
+      setGetterPropCallInfo('getDropdownProps', suppressRefError, refKey, dropdownRef);
+      return _extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (dropdownNode) {
+        if (dropdownNode) {
+          dropdownRef.current = dropdownNode;
+        }
+      }), _extends3), !preventKeyAction && {
+        onKeyDown: callAllEventHandlers(onKeyDown, function dropdownHandleKeyDown(event) {
+          var key = normalizeArrowKey(event);
+
+          if (key && dropdownKeyDownHandlers[key]) {
+            dropdownKeyDownHandlers[key](event);
+          }
+        }),
+        onClick: callAllEventHandlers(onClick, function dropdownHandleClick() {
+          dispatch({
+            type: DropdownClick
+          });
+        })
+      }, {}, rest);
+    }, [dispatch, dropdownKeyDownHandlers, setGetterPropCallInfo]); // returns
+
+    var addSelectedItem = react.useCallback(function (selectedItem) {
+      dispatch({
+        type: FunctionAddSelectedItem,
+        selectedItem: selectedItem
+      });
+    }, [dispatch]);
+    var removeSelectedItem = react.useCallback(function (selectedItem) {
+      dispatch({
+        type: FunctionRemoveSelectedItem,
+        selectedItem: selectedItem
+      });
+    }, [dispatch]);
+    var setSelectedItems = react.useCallback(function (newSelectedItems) {
+      dispatch({
+        type: FunctionSetSelectedItems,
+        selectedItems: newSelectedItems
+      });
+    }, [dispatch]);
+    var setActiveIndex = react.useCallback(function (newActiveIndex) {
+      dispatch({
+        type: FunctionSetActiveIndex,
+        activeIndex: newActiveIndex
+      });
+    }, [dispatch]);
+    var reset = react.useCallback(function () {
+      dispatch({
+        type: FunctionReset$2
+      });
+    }, [dispatch]);
+    return {
+      getSelectedItemProps: getSelectedItemProps,
+      getDropdownProps: getDropdownProps,
+      addSelectedItem: addSelectedItem,
+      removeSelectedItem: removeSelectedItem,
+      setSelectedItems: setSelectedItems,
+      setActiveIndex: setActiveIndex,
+      reset: reset,
       selectedItems: selectedItems,
       activeIndex: activeIndex
     };