downshift 7.2.2-alpha.0 → 7.3.0

package/CHANGELOG.md

@@ -0,0 +1,5 @@
+# CHANGELOG
+
+The changelog is automatically updated using
+[semantic-release](https://github.com/semantic-release/semantic-release). You
+can see it on the [releases page](../../releases).

package/README.md

@@ -57,7 +57,7 @@ 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.
 
-Both _useSelect_ and _useCombobox_ support he latest ARIA combobox patterns for
+Both _useSelect_ and _useCombobox_ support the latest ARIA combobox patterns for
 W3C, which _Downshift_ does not. Consequently, we strongly recommend the you use
 the hooks. The hooks have been migrated to the ARIA 1.2 combobox pattern in the
 version 7 of _downshift_. There is a [Migration Guide][migration-guide-v7] that

package/dist/downshift.cjs.js

@@ -510,9 +510,18 @@ var Downshift = /*#__PURE__*/function () {
       };
       _this.input = null;
       _this.items = [];
+      // itemCount can be changed asynchronously
+      // from within downshift (so it can't come from a prop)
+      // this is why we store it as an instance and use
+      // getItemCount rather than just use items.length
+      // (to support windowing + async)
       _this.itemCount = null;
       _this.previousResultCount = 0;
       _this.timeoutIds = [];
+      /**
+       * @param {Function} fn the function to call after the time
+       * @param {Number} time the time to wait
+       */
       _this.internalSetTimeout = function (fn, time) {
         var id = setTimeout(function () {
           _this.timeoutIds = _this.timeoutIds.filter(function (i) {
@@ -567,6 +576,14 @@ var Downshift = /*#__PURE__*/function () {
       _this.selectHighlightedItem = function (otherStateToSet, cb) {
         return _this.selectItemAtIndex(_this.getState().highlightedIndex, otherStateToSet, cb);
       };
+      // any piece of our state can live in two places:
+      // 1. Uncontrolled: it's internal (this.state)
+      //    We will call this.setState to update that state
+      // 2. Controlled: it's external (this.props)
+      //    We will call this.props.onStateChange to update that state
+      //
+      // In addition, we'll call this.props.onChange if the
+      // selectedItem is changed.
       _this.internalSetState = function (stateToSet, cb) {
         var isItemSelected, onChangeArg;
         var onStateChangeArg = {};
@@ -649,6 +666,7 @@ var Downshift = /*#__PURE__*/function () {
           _this.props.onUserAction(onStateChangeArg, _this.getStateAndHelpers());
         });
       };
+      //////////////////////////// ROOT
       _this.rootRef = function (node) {
         return _this._rootNode = node;
       };
@@ -671,6 +689,7 @@ var Downshift = /*#__PURE__*/function () {
           isOpen = _this$getState.isOpen;
         return _extends__default["default"]((_extends2 = {}, _extends2[refKey] = handleRefs(ref, _this.rootRef), _extends2.role = 'combobox', _extends2['aria-expanded'] = isOpen, _extends2['aria-haspopup'] = 'listbox', _extends2['aria-owns'] = isOpen ? _this.menuId : null, _extends2['aria-labelledby'] = _this.labelId, _extends2), rest);
       };
+      //\\\\\\\\\\\\\\\\\\\\\\\\\\ ROOT
       _this.keyDownHandlers = {
         ArrowDown: function ArrowDown(event) {
           var _this2 = this;
@@ -755,6 +774,7 @@ var Downshift = /*#__PURE__*/function () {
           }));
         }
       };
+      //////////////////////////// BUTTON
       _this.buttonKeyDownHandlers = _extends__default["default"]({}, _this.keyDownHandlers, {
         ' ': function _(event) {
           event.preventDefault();
@@ -878,12 +898,16 @@ var Downshift = /*#__PURE__*/function () {
           }
         });
       };
+      //\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ BUTTON
+      /////////////////////////////// LABEL
       _this.getLabelProps = function (props) {
         return _extends__default["default"]({
           htmlFor: _this.inputId,
           id: _this.labelId
         }, props);
       };
+      //\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ LABEL
+      /////////////////////////////// INPUT
       _this.getInputProps = function (_temp4) {
         var _ref4 = _temp4 === void 0 ? {} : _temp4,
           onKeyDown = _ref4.onKeyDown,
@@ -944,6 +968,8 @@ var Downshift = /*#__PURE__*/function () {
           }
         });
       };
+      //\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ INPUT
+      /////////////////////////////// MENU
       _this.menuRef = function (node) {
         _this._menuNode = node;
       };
@@ -962,6 +988,8 @@ var Downshift = /*#__PURE__*/function () {
         _this.getMenuProps.suppressRefError = suppressRefError;
         return _extends__default["default"]((_extends3 = {}, _extends3[refKey] = handleRefs(ref, _this.menuRef), _extends3.role = 'listbox', _extends3['aria-labelledby'] = props && props['aria-label'] ? null : _this.labelId, _extends3.id = _this.menuId, _extends3), props);
       };
+      //\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ MENU
+      /////////////////////////////// ITEM
       _this.getItemProps = function (_temp7) {
         var _enabledEventHandlers;
         var _ref7 = _temp7 === void 0 ? {} : _temp7,
@@ -1025,6 +1053,7 @@ var Downshift = /*#__PURE__*/function () {
           'aria-selected': _this.getState().highlightedIndex === index
         }, eventHandlers, rest);
       };
+      //\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ITEM
       _this.clearItems = function () {
         _this.items = [];
       };
@@ -1232,10 +1261,7 @@ var Downshift = /*#__PURE__*/function () {
         isOpen: isOpen,
         selectedItem: selectedItem
       };
-    }
-
-    //////////////////////////// ROOT
-    ;
+    };
     _proto.componentDidMount = function componentDidMount() {
       var _this7 = this;
       /* istanbul ignore if (react-native) */
@@ -1747,8 +1773,11 @@ function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, hand
     isTouchMove: false
   });
   react.useEffect(function () {
+    if ((environment == null ? void 0 : environment.addEventListener) == null) {
+      return;
+    }
 
-    // The same strategy for checking if a click occurred inside or outside downsift
+    // The same strategy for checking if a click occurred inside or outside downshift
     // as in downshift.js.
     var onMouseDown = function onMouseDown() {
       mouseAndTouchTrackersRef.current.isMouseDown = true;
@@ -3020,13 +3049,14 @@ function useCombobox(userProps) {
   }, []);
   // Reset itemRefs on close.
   react.useEffect(function () {
+    var _environment$document;
     if (!isOpen) {
       itemRefs.current = {};
-    } else if (document.activeElement !== inputRef.current) {
+    } else if (((_environment$document = environment.document) == null ? void 0 : _environment$document.activeElement) !== inputRef.current) {
       var _inputRef$current;
       inputRef == null ? void 0 : (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
     }
-  }, [isOpen]);
+  }, [isOpen, environment]);
 
   /* Event handler functions */
   var inputKeyDownHandlers = react.useMemo(function () {

package/dist/downshift.esm.js

@@ -497,9 +497,18 @@ var Downshift = /*#__PURE__*/function () {
       };
       _this.input = null;
       _this.items = [];
+      // itemCount can be changed asynchronously
+      // from within downshift (so it can't come from a prop)
+      // this is why we store it as an instance and use
+      // getItemCount rather than just use items.length
+      // (to support windowing + async)
       _this.itemCount = null;
       _this.previousResultCount = 0;
       _this.timeoutIds = [];
+      /**
+       * @param {Function} fn the function to call after the time
+       * @param {Number} time the time to wait
+       */
       _this.internalSetTimeout = function (fn, time) {
         var id = setTimeout(function () {
           _this.timeoutIds = _this.timeoutIds.filter(function (i) {
@@ -554,6 +563,14 @@ var Downshift = /*#__PURE__*/function () {
       _this.selectHighlightedItem = function (otherStateToSet, cb) {
         return _this.selectItemAtIndex(_this.getState().highlightedIndex, otherStateToSet, cb);
       };
+      // any piece of our state can live in two places:
+      // 1. Uncontrolled: it's internal (this.state)
+      //    We will call this.setState to update that state
+      // 2. Controlled: it's external (this.props)
+      //    We will call this.props.onStateChange to update that state
+      //
+      // In addition, we'll call this.props.onChange if the
+      // selectedItem is changed.
       _this.internalSetState = function (stateToSet, cb) {
         var isItemSelected, onChangeArg;
         var onStateChangeArg = {};
@@ -636,6 +653,7 @@ var Downshift = /*#__PURE__*/function () {
           _this.props.onUserAction(onStateChangeArg, _this.getStateAndHelpers());
         });
       };
+      //////////////////////////// ROOT
       _this.rootRef = function (node) {
         return _this._rootNode = node;
       };
@@ -658,6 +676,7 @@ var Downshift = /*#__PURE__*/function () {
           isOpen = _this$getState.isOpen;
         return _extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, _this.rootRef), _extends2.role = 'combobox', _extends2['aria-expanded'] = isOpen, _extends2['aria-haspopup'] = 'listbox', _extends2['aria-owns'] = isOpen ? _this.menuId : null, _extends2['aria-labelledby'] = _this.labelId, _extends2), rest);
       };
+      //\\\\\\\\\\\\\\\\\\\\\\\\\\ ROOT
       _this.keyDownHandlers = {
         ArrowDown: function ArrowDown(event) {
           var _this2 = this;
@@ -742,6 +761,7 @@ var Downshift = /*#__PURE__*/function () {
           }));
         }
       };
+      //////////////////////////// BUTTON
       _this.buttonKeyDownHandlers = _extends({}, _this.keyDownHandlers, {
         ' ': function _(event) {
           event.preventDefault();
@@ -865,12 +885,16 @@ var Downshift = /*#__PURE__*/function () {
           }
         });
       };
+      //\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ BUTTON
+      /////////////////////////////// LABEL
       _this.getLabelProps = function (props) {
         return _extends({
           htmlFor: _this.inputId,
           id: _this.labelId
         }, props);
       };
+      //\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ LABEL
+      /////////////////////////////// INPUT
       _this.getInputProps = function (_temp4) {
         var _ref4 = _temp4 === void 0 ? {} : _temp4,
           onKeyDown = _ref4.onKeyDown,
@@ -931,6 +955,8 @@ var Downshift = /*#__PURE__*/function () {
           }
         });
       };
+      //\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ INPUT
+      /////////////////////////////// MENU
       _this.menuRef = function (node) {
         _this._menuNode = node;
       };
@@ -949,6 +975,8 @@ var Downshift = /*#__PURE__*/function () {
         _this.getMenuProps.suppressRefError = suppressRefError;
         return _extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, _this.menuRef), _extends3.role = 'listbox', _extends3['aria-labelledby'] = props && props['aria-label'] ? null : _this.labelId, _extends3.id = _this.menuId, _extends3), props);
       };
+      //\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ MENU
+      /////////////////////////////// ITEM
       _this.getItemProps = function (_temp7) {
         var _enabledEventHandlers;
         var _ref7 = _temp7 === void 0 ? {} : _temp7,
@@ -1012,6 +1040,7 @@ var Downshift = /*#__PURE__*/function () {
           'aria-selected': _this.getState().highlightedIndex === index
         }, eventHandlers, rest);
       };
+      //\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ITEM
       _this.clearItems = function () {
         _this.items = [];
       };
@@ -1219,10 +1248,7 @@ var Downshift = /*#__PURE__*/function () {
         isOpen: isOpen,
         selectedItem: selectedItem
       };
-    }
-
-    //////////////////////////// ROOT
-    ;
+    };
     _proto.componentDidMount = function componentDidMount() {
       var _this7 = this;
       /* istanbul ignore if (react-native) */
@@ -1734,8 +1760,11 @@ function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, hand
     isTouchMove: false
   });
   useEffect(function () {
+    if ((environment == null ? void 0 : environment.addEventListener) == null) {
+      return;
+    }
 
-    // The same strategy for checking if a click occurred inside or outside downsift
+    // The same strategy for checking if a click occurred inside or outside downshift
     // as in downshift.js.
     var onMouseDown = function onMouseDown() {
       mouseAndTouchTrackersRef.current.isMouseDown = true;
@@ -3007,13 +3036,14 @@ function useCombobox(userProps) {
   }, []);
   // Reset itemRefs on close.
   useEffect(function () {
+    var _environment$document;
     if (!isOpen) {
       itemRefs.current = {};
-    } else if (document.activeElement !== inputRef.current) {
+    } else if (((_environment$document = environment.document) == null ? void 0 : _environment$document.activeElement) !== inputRef.current) {
       var _inputRef$current;
       inputRef == null ? void 0 : (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
     }
-  }, [isOpen]);
+  }, [isOpen, environment]);
 
   /* Event handler functions */
   var inputKeyDownHandlers = useMemo(function () {

package/dist/downshift.native.cjs.js

@@ -59,6 +59,17 @@ function scrollIntoView(node, menuNode) {
   });
 }
 
+/**
+ * @param {HTMLElement} parent the parent node
+ * @param {HTMLElement} child the child node
+ * @param {Window} environment The window context where downshift renders.
+ * @return {Boolean} whether the parent is the child or the child is in the parent
+ */
+function isOrContainsNode(parent, child, environment) {
+  var result = parent === child || child instanceof environment.Node && parent.contains && parent.contains(child);
+  return result;
+}
+
 /**
  * Simple debounce implementation. Will call the given
  * function once after the time given has passed since
@@ -351,6 +362,25 @@ function getNextNonDisabledIndex(moveAmount, baseIndex, itemCount, getItemNodeFr
   return -1;
 }
 
+/**
+ * Checks if event target is within the downshift elements.
+ *
+ * @param {EventTarget} target Target to check.
+ * @param {HTMLElement[]} downshiftElements The elements that form downshift (list, toggle button etc).
+ * @param {Window} environment The window context where downshift renders.
+ * @param {boolean} checkActiveElement Whether to also check activeElement.
+ *
+ * @returns {boolean} Whether or not the target is within downshift elements.
+ */
+function targetWithinDownshift(target, downshiftElements, environment, checkActiveElement) {
+  if (checkActiveElement === void 0) {
+    checkActiveElement = true;
+  }
+  return downshiftElements.some(function (contextNode) {
+    return contextNode && (isOrContainsNode(contextNode, target, environment) || checkActiveElement && isOrContainsNode(contextNode, environment.document.activeElement, environment));
+  });
+}
+
 // eslint-disable-next-line import/no-mutable-exports
 var validateControlledUnchanged = noop;
 /* istanbul ignore next */
@@ -480,9 +510,18 @@ var Downshift = /*#__PURE__*/function () {
       };
       _this.input = null;
       _this.items = [];
+      // itemCount can be changed asynchronously
+      // from within downshift (so it can't come from a prop)
+      // this is why we store it as an instance and use
+      // getItemCount rather than just use items.length
+      // (to support windowing + async)
       _this.itemCount = null;
       _this.previousResultCount = 0;
       _this.timeoutIds = [];
+      /**
+       * @param {Function} fn the function to call after the time
+       * @param {Number} time the time to wait
+       */
       _this.internalSetTimeout = function (fn, time) {
         var id = setTimeout(function () {
           _this.timeoutIds = _this.timeoutIds.filter(function (i) {
@@ -537,6 +576,14 @@ var Downshift = /*#__PURE__*/function () {
       _this.selectHighlightedItem = function (otherStateToSet, cb) {
         return _this.selectItemAtIndex(_this.getState().highlightedIndex, otherStateToSet, cb);
       };
+      // any piece of our state can live in two places:
+      // 1. Uncontrolled: it's internal (this.state)
+      //    We will call this.setState to update that state
+      // 2. Controlled: it's external (this.props)
+      //    We will call this.props.onStateChange to update that state
+      //
+      // In addition, we'll call this.props.onChange if the
+      // selectedItem is changed.
       _this.internalSetState = function (stateToSet, cb) {
         var isItemSelected, onChangeArg;
         var onStateChangeArg = {};
@@ -619,6 +666,7 @@ var Downshift = /*#__PURE__*/function () {
           _this.props.onUserAction(onStateChangeArg, _this.getStateAndHelpers());
         });
       };
+      //////////////////////////// ROOT
       _this.rootRef = function (node) {
         return _this._rootNode = node;
       };
@@ -641,6 +689,7 @@ var Downshift = /*#__PURE__*/function () {
           isOpen = _this$getState.isOpen;
         return _extends__default["default"]((_extends2 = {}, _extends2[refKey] = handleRefs(ref, _this.rootRef), _extends2.role = 'combobox', _extends2['aria-expanded'] = isOpen, _extends2['aria-haspopup'] = 'listbox', _extends2['aria-owns'] = isOpen ? _this.menuId : null, _extends2['aria-labelledby'] = _this.labelId, _extends2), rest);
       };
+      //\\\\\\\\\\\\\\\\\\\\\\\\\\ ROOT
       _this.keyDownHandlers = {
         ArrowDown: function ArrowDown(event) {
           var _this2 = this;
@@ -725,6 +774,7 @@ var Downshift = /*#__PURE__*/function () {
           }));
         }
       };
+      //////////////////////////// BUTTON
       _this.buttonKeyDownHandlers = _extends__default["default"]({}, _this.keyDownHandlers, {
         ' ': function _(event) {
           event.preventDefault();
@@ -840,12 +890,16 @@ var Downshift = /*#__PURE__*/function () {
           }
         });
       };
+      //\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ BUTTON
+      /////////////////////////////// LABEL
       _this.getLabelProps = function (props) {
         return _extends__default["default"]({
           htmlFor: _this.inputId,
           id: _this.labelId
         }, props);
       };
+      //\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ LABEL
+      /////////////////////////////// INPUT
       _this.getInputProps = function (_temp4) {
         var _ref4 = _temp4 === void 0 ? {} : _temp4,
           onKeyDown = _ref4.onKeyDown,
@@ -921,6 +975,8 @@ var Downshift = /*#__PURE__*/function () {
           }
         });
       };
+      //\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ INPUT
+      /////////////////////////////// MENU
       _this.menuRef = function (node) {
         _this._menuNode = node;
       };
@@ -939,6 +995,8 @@ var Downshift = /*#__PURE__*/function () {
         _this.getMenuProps.suppressRefError = suppressRefError;
         return _extends__default["default"]((_extends3 = {}, _extends3[refKey] = handleRefs(ref, _this.menuRef), _extends3.role = 'listbox', _extends3['aria-labelledby'] = props && props['aria-label'] ? null : _this.labelId, _extends3.id = _this.menuId, _extends3), props);
       };
+      //\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ MENU
+      /////////////////////////////// ITEM
       _this.getItemProps = function (_temp7) {
         var _enabledEventHandlers;
         var _ref7 = _temp7 === void 0 ? {} : _temp7,
@@ -1002,6 +1060,7 @@ var Downshift = /*#__PURE__*/function () {
           'aria-selected': _this.getState().highlightedIndex === index
         }, eventHandlers, rest);
       };
+      //\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ITEM
       _this.clearItems = function () {
         _this.items = [];
       };
@@ -1204,10 +1263,7 @@ var Downshift = /*#__PURE__*/function () {
         isOpen: isOpen,
         selectedItem: selectedItem
       };
-    }
-
-    //////////////////////////// ROOT
-    ;
+    };
     _proto.componentDidMount = function componentDidMount() {
       var _this7 = this;
       /* istanbul ignore if (react-native) */
@@ -1652,10 +1708,50 @@ function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, hand
     isTouchMove: false
   });
   react.useEffect(function () {
-    /* istanbul ignore if (react-native) */
-    {
+    if ((environment == null ? void 0 : environment.addEventListener) == null) {
       return;
     }
+
+    // The same strategy for checking if a click occurred inside or outside downshift
+    // as in downshift.js.
+    var onMouseDown = function onMouseDown() {
+      mouseAndTouchTrackersRef.current.isMouseDown = true;
+    };
+    var onMouseUp = function onMouseUp(event) {
+      mouseAndTouchTrackersRef.current.isMouseDown = false;
+      if (isOpen && !targetWithinDownshift(event.target, downshiftElementRefs.map(function (ref) {
+        return ref.current;
+      }), environment)) {
+        handleBlur();
+      }
+    };
+    var onTouchStart = function onTouchStart() {
+      mouseAndTouchTrackersRef.current.isTouchMove = false;
+    };
+    var onTouchMove = function onTouchMove() {
+      mouseAndTouchTrackersRef.current.isTouchMove = true;
+    };
+    var onTouchEnd = function onTouchEnd(event) {
+      if (isOpen && !mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElementRefs.map(function (ref) {
+        return ref.current;
+      }), environment, false)) {
+        handleBlur();
+      }
+    };
+    environment.addEventListener('mousedown', onMouseDown);
+    environment.addEventListener('mouseup', onMouseUp);
+    environment.addEventListener('touchstart', onTouchStart);
+    environment.addEventListener('touchmove', onTouchMove);
+    environment.addEventListener('touchend', onTouchEnd);
+
+    // eslint-disable-next-line consistent-return
+    return function cleanup() {
+      environment.removeEventListener('mousedown', onMouseDown);
+      environment.removeEventListener('mouseup', onMouseUp);
+      environment.removeEventListener('touchstart', onTouchStart);
+      environment.removeEventListener('touchmove', onTouchMove);
+      environment.removeEventListener('touchend', onTouchEnd);
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isOpen, environment]);
   return mouseAndTouchTrackersRef;
@@ -2194,7 +2290,11 @@ function useSelect(userProps) {
     previousResultCountRef.current = items.length;
   });
   // Add mouse/touch events to document.
-  var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [menuRef, toggleButtonRef], environment);
+  var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [menuRef, toggleButtonRef], environment, function () {
+    dispatch({
+      type: ToggleButtonBlur
+    });
+  });
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps');
   // Make initial ref false.
   react.useEffect(function () {
@@ -2855,7 +2955,12 @@ function useCombobox(userProps) {
     previousResultCountRef.current = items.length;
   });
   // Add mouse/touch events to document.
-  var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [inputRef, menuRef, toggleButtonRef], environment);
+  var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [inputRef, menuRef, toggleButtonRef], environment, function () {
+    dispatch({
+      type: InputBlur,
+      selectItem: false
+    });
+  });
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getMenuProps');
   // Make initial ref false.
   react.useEffect(function () {
@@ -2866,13 +2971,14 @@ function useCombobox(userProps) {
   }, []);
   // Reset itemRefs on close.
   react.useEffect(function () {
+    var _environment$document;
     if (!isOpen) {
       itemRefs.current = {};
-    } else if (document.activeElement !== inputRef.current) {
+    } else if (((_environment$document = environment.document) == null ? void 0 : _environment$document.activeElement) !== inputRef.current) {
       var _inputRef$current;
       inputRef == null ? void 0 : (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
     }
-  }, [isOpen]);
+  }, [isOpen, environment]);
 
   /* Event handler functions */
   var inputKeyDownHandlers = react.useMemo(function () {