@reach/combobox - npm Package Compare versions

Comparing version 0.15.1 to 0.15.2

dist/reach-combobox.cjs.dev.js

@@ -8,3 +8,2 @@ 'use strict';
 var useIsomorphicLayoutEffect = require('@reach/utils/use-isomorphic-layout-effect');
-var ownerDocument = require('@reach/utils/owner-document');
 var context = require('@reach/utils/context');
@@ -16,3 +15,2 @@ var typeCheck = require('@reach/utils/type-check');
 var composeRefs = require('@reach/utils/compose-refs');
-var useLazyRef = require('@reach/utils/use-lazy-ref');
 var useUpdateEffect = require('@reach/utils/use-update-effect');
@@ -232,2 +230,9 @@ var composeEventHandlers = require('@reach/utils/compose-event-handlers');
 
+var _excluded = ["onSelect", "openOnFocus", "children", "as", "aria-label", "aria-labelledby"],
+    _excluded2 = ["as", "selectOnClick", "autocomplete", "onClick", "onChange", "onKeyDown", "onBlur", "onFocus", "value"],
+    _excluded3 = ["as", "children", "portal", "onKeyDown", "onBlur", "position"],
+    _excluded4 = ["persistSelection", "as"],
+    _excluded5 = ["as", "children", "value", "onClick"],
+    _excluded6 = ["as", "onClick", "onKeyDown"];
+
 var _on, _on2, _on3, _on4, _states;
@@ -268,2 +273,3 @@ ////////////////////////////////////////////////////////////////////////////////
 var OPEN_WITH_BUTTON = "OPEN_WITH_BUTTON";
+var OPEN_WITH_INPUT_CLICK = "OPEN_WITH_INPUT_CLICK";
 var CLOSE_WITH_BUTTON = "CLOSE_WITH_BUTTON"; ////////////////////////////////////////////////////////////////////////////////
@@ -274,3 +280,3 @@
   states: (_states = {}, _states[IDLE] = {
-    on: (_on = {}, _on[BLUR] = IDLE, _on[CLEAR] = IDLE, _on[CHANGE] = SUGGESTING, _on[INITIAL_CHANGE] = IDLE, _on[FOCUS] = SUGGESTING, _on[NAVIGATE] = NAVIGATING, _on[OPEN_WITH_BUTTON] = SUGGESTING, _on)
+    on: (_on = {}, _on[BLUR] = IDLE, _on[CLEAR] = IDLE, _on[CHANGE] = SUGGESTING, _on[INITIAL_CHANGE] = IDLE, _on[FOCUS] = SUGGESTING, _on[NAVIGATE] = NAVIGATING, _on[OPEN_WITH_BUTTON] = SUGGESTING, _on[OPEN_WITH_INPUT_CLICK] = SUGGESTING, _on)
   }, _states[SUGGESTING] = {
@@ -300,2 +306,3 @@ on: (_on2 = {}, _on2[CHANGE] = SUGGESTING, _on2[FOCUS] = SUGGESTING, _on2[NAVIGATE] = NAVIGATING, _on2[CLEAR] = IDLE, _on2[ESCAPE] = IDLE, _on2[BLUR] = IDLE, _on2[SELECT_WITH_CLICK] = IDLE, _on2[INTERACT] = INTERACTING, _on2[CLOSE_WITH_BUTTON] = IDLE, _on2)
     case OPEN_WITH_BUTTON:
+    case OPEN_WITH_INPUT_CLICK:
       return _extends({}, nextState, {
@@ -395,3 +402,3 @@ navigationValue: findNavigationValue(nextState, event)
       ariaLabelledby = _ref["aria-labelledby"],
-      props = _objectWithoutPropertiesLoose(_ref, ["onSelect", "openOnFocus", "children", "as", "aria-label", "aria-labelledby"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
@@ -412,4 +419,4 @@ var _useDescendantsInit = descendants.useDescendantsInit(),
 
-  var autocompletePropRef = React.useRef();
-  var persistSelectionRef = React.useRef();
+  var autocompletePropRef = React.useRef(false);
+  var persistSelectionRef = React.useRef(false);
   var defaultData = {
@@ -501,3 +508,3 @@ // The value the user has typed. We derive this also when the developer is
       controlledValue = _ref2.value,
-      props = _objectWithoutPropertiesLoose(_ref2, ["as", "selectOnClick", "autocomplete", "onClick", "onChange", "onKeyDown", "onBlur", "onFocus", "value"]);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
 
@@ -592,5 +599,11 @@ // https://github.com/reach/reach-ui/issues/464
     if (selectOnClickRef.current) {
+      var _inputRef$current;
+
       selectOnClickRef.current = false;
-      inputRef.current.select();
+      (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.select();
     }
+
+    if (openOnFocus && state === IDLE) {
+      transition(OPEN_WITH_INPUT_CLICK);
+    }
   }
@@ -650,3 +663,3 @@
       position = _ref3$position === void 0 ? popover.positionMatchWidth : _ref3$position,
-      props = _objectWithoutPropertiesLoose(_ref3, ["as", "children", "portal", "onKeyDown", "onBlur", "position"]);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
 
@@ -710,3 +723,3 @@ var _React$useContext2 = React.useContext(ComboboxContext),
       Comp = _ref4$as === void 0 ? "ul" : _ref4$as,
-      props = _objectWithoutPropertiesLoose(_ref4, ["persistSelection", "as"]);
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
 
@@ -752,3 +765,3 @@ var _React$useContext3 = React.useContext(ComboboxContext),
       onClick = _ref5.onClick,
-      props = _objectWithoutPropertiesLoose(_ref5, ["as", "children", "value", "onClick"]);
+      props = _objectWithoutPropertiesLoose(_ref5, _excluded5);
 
@@ -862,3 +875,3 @@ var _React$useContext4 = React.useContext(ComboboxContext),
       onKeyDown = _ref6.onKeyDown,
-      props = _objectWithoutPropertiesLoose(_ref6, ["as", "onClick", "onKeyDown"]);
+      props = _objectWithoutPropertiesLoose(_ref6, _excluded6);
 
@@ -916,3 +929,5 @@ var _React$useContext7 = React.useContext(ComboboxContext),
     if (lastEventType === NAVIGATE || lastEventType === ESCAPE || lastEventType === SELECT_WITH_CLICK || lastEventType === OPEN_WITH_BUTTON) {
-      inputRef.current.focus();
+      var _inputRef$current2;
+
+      (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.focus();
     }
@@ -1101,35 +1116,19 @@ }, [inputRef, lastEventType]);
 
-  var rafIds = useLazyRef.useLazyRef(function () {
-    return new Set();
-  });
-  React.useEffect(function () {
-    return function () {
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      rafIds.current.forEach(function (id) {
-        return cancelAnimationFrame(id);
-      });
-    };
-  }, [rafIds]);
-  return function handleBlur() {
-    var ownerDocument$1 = ownerDocument.getOwnerDocument(popoverRef.current);
+  return function handleBlur(event) {
+    var popover = popoverRef.current;
+    var input = inputRef.current;
+    var button = buttonRef.current;
+    var activeElement = event.relatedTarget; // we on want to close only if focus propss outside the combobox
 
-    if (!ownerDocument$1) {
-      return;
-    }
-
-    var rafId = requestAnimationFrame(function () {
-      // we on want to close only if focus propss outside the combobox
-      if (ownerDocument$1.activeElement !== inputRef.current && ownerDocument$1.activeElement !== buttonRef.current && popoverRef.current) {
-        if (popoverRef.current.contains(ownerDocument$1.activeElement)) {
-          // focus landed inside the combobox, keep it open
-          if (state !== INTERACTING) {
-            transition(INTERACT);
-          }
-        } else {
-          // focus landed outside the combobox, close it.
-          transition(BLUR);
+    if (activeElement !== input && activeElement !== button && popover) {
+      if (popover.contains(activeElement)) {
+        // focus landed inside the combobox, keep it open
+        if (state !== INTERACTING) {
+          transition(INTERACT);
         }
+      } else {
+        // focus landed outside the combobox, close it.
+        transition(BLUR);
       }
-    });
-    rafIds.current.add(rafId);
+    }
   };
@@ -1205,4 +1204,16 @@ }
   return hash;
-}
+} // function getActiveElement(node: Element | null | undefined) {
+//   let activeElement: Element | null = null;
+//   try {
+//     // If Element.getRootNode is supported, we'll retrieve either the root
+//     // Document or shadow root depending on where the component is rendered.
+//     // https://github.com/reach/reach-ui/issues/787
+//     activeElement = (node?.getRootNode() as ShadowRoot | Document)
+//       .activeElement;
+//   } finally {
+//     return activeElement || (node?.ownerDocument || document).activeElement;
+//   }
+// }
 
+
 function getDataState(state) {
@@ -1209,0 +1220,0 @@ return state.toLowerCase();

dist/reach-combobox.cjs.prod.js

@@ -8,3 +8,2 @@ 'use strict';
 var useIsomorphicLayoutEffect = require('@reach/utils/use-isomorphic-layout-effect');
-var ownerDocument = require('@reach/utils/owner-document');
 var context = require('@reach/utils/context');
@@ -16,3 +15,2 @@ var typeCheck = require('@reach/utils/type-check');
 var composeRefs = require('@reach/utils/compose-refs');
-var useLazyRef = require('@reach/utils/use-lazy-ref');
 var useUpdateEffect = require('@reach/utils/use-update-effect');
@@ -228,2 +226,9 @@ var composeEventHandlers = require('@reach/utils/compose-event-handlers');
 
+var _excluded = ["onSelect", "openOnFocus", "children", "as", "aria-label", "aria-labelledby"],
+    _excluded2 = ["as", "selectOnClick", "autocomplete", "onClick", "onChange", "onKeyDown", "onBlur", "onFocus", "value"],
+    _excluded3 = ["as", "children", "portal", "onKeyDown", "onBlur", "position"],
+    _excluded4 = ["persistSelection", "as"],
+    _excluded5 = ["as", "children", "value", "onClick"],
+    _excluded6 = ["as", "onClick", "onKeyDown"];
+
 var _on, _on2, _on3, _on4, _states;
@@ -264,2 +269,3 @@ ////////////////////////////////////////////////////////////////////////////////
 var OPEN_WITH_BUTTON = "OPEN_WITH_BUTTON";
+var OPEN_WITH_INPUT_CLICK = "OPEN_WITH_INPUT_CLICK";
 var CLOSE_WITH_BUTTON = "CLOSE_WITH_BUTTON"; ////////////////////////////////////////////////////////////////////////////////
@@ -270,3 +276,3 @@
   states: (_states = {}, _states[IDLE] = {
-    on: (_on = {}, _on[BLUR] = IDLE, _on[CLEAR] = IDLE, _on[CHANGE] = SUGGESTING, _on[INITIAL_CHANGE] = IDLE, _on[FOCUS] = SUGGESTING, _on[NAVIGATE] = NAVIGATING, _on[OPEN_WITH_BUTTON] = SUGGESTING, _on)
+    on: (_on = {}, _on[BLUR] = IDLE, _on[CLEAR] = IDLE, _on[CHANGE] = SUGGESTING, _on[INITIAL_CHANGE] = IDLE, _on[FOCUS] = SUGGESTING, _on[NAVIGATE] = NAVIGATING, _on[OPEN_WITH_BUTTON] = SUGGESTING, _on[OPEN_WITH_INPUT_CLICK] = SUGGESTING, _on)
   }, _states[SUGGESTING] = {
@@ -296,2 +302,3 @@ on: (_on2 = {}, _on2[CHANGE] = SUGGESTING, _on2[FOCUS] = SUGGESTING, _on2[NAVIGATE] = NAVIGATING, _on2[CLEAR] = IDLE, _on2[ESCAPE] = IDLE, _on2[BLUR] = IDLE, _on2[SELECT_WITH_CLICK] = IDLE, _on2[INTERACT] = INTERACTING, _on2[CLOSE_WITH_BUTTON] = IDLE, _on2)
     case OPEN_WITH_BUTTON:
+    case OPEN_WITH_INPUT_CLICK:
       return _extends({}, nextState, {
@@ -391,3 +398,3 @@ navigationValue: findNavigationValue(nextState, event)
       ariaLabelledby = _ref["aria-labelledby"],
-      props = _objectWithoutPropertiesLoose(_ref, ["onSelect", "openOnFocus", "children", "as", "aria-label", "aria-labelledby"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
@@ -408,4 +415,4 @@ var _useDescendantsInit = descendants.useDescendantsInit(),
 
-  var autocompletePropRef = React.useRef();
-  var persistSelectionRef = React.useRef();
+  var autocompletePropRef = React.useRef(false);
+  var persistSelectionRef = React.useRef(false);
   var defaultData = {
@@ -485,3 +492,3 @@ // The value the user has typed. We derive this also when the developer is
       controlledValue = _ref2.value,
-      props = _objectWithoutPropertiesLoose(_ref2, ["as", "selectOnClick", "autocomplete", "onClick", "onChange", "onKeyDown", "onBlur", "onFocus", "value"]);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
 
@@ -576,5 +583,11 @@ // https://github.com/reach/reach-ui/issues/464
     if (selectOnClickRef.current) {
+      var _inputRef$current;
+
       selectOnClickRef.current = false;
-      inputRef.current.select();
+      (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.select();
     }
+
+    if (openOnFocus && state === IDLE) {
+      transition(OPEN_WITH_INPUT_CLICK);
+    }
   }
@@ -627,3 +640,3 @@
       position = _ref3$position === void 0 ? popover.positionMatchWidth : _ref3$position,
-      props = _objectWithoutPropertiesLoose(_ref3, ["as", "children", "portal", "onKeyDown", "onBlur", "position"]);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
 
@@ -683,3 +696,3 @@ var _React$useContext2 = React.useContext(ComboboxContext),
       Comp = _ref4$as === void 0 ? "ul" : _ref4$as,
-      props = _objectWithoutPropertiesLoose(_ref4, ["persistSelection", "as"]);
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
 
@@ -718,3 +731,3 @@ var _React$useContext3 = React.useContext(ComboboxContext),
       onClick = _ref5.onClick,
-      props = _objectWithoutPropertiesLoose(_ref5, ["as", "children", "value", "onClick"]);
+      props = _objectWithoutPropertiesLoose(_ref5, _excluded5);
 
@@ -817,3 +830,3 @@ var _React$useContext4 = React.useContext(ComboboxContext),
       onKeyDown = _ref6.onKeyDown,
-      props = _objectWithoutPropertiesLoose(_ref6, ["as", "onClick", "onKeyDown"]);
+      props = _objectWithoutPropertiesLoose(_ref6, _excluded6);
 
@@ -867,3 +880,5 @@ var _React$useContext7 = React.useContext(ComboboxContext),
     if (lastEventType === NAVIGATE || lastEventType === ESCAPE || lastEventType === SELECT_WITH_CLICK || lastEventType === OPEN_WITH_BUTTON) {
-      inputRef.current.focus();
+      var _inputRef$current2;
+
+      (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.focus();
     }
@@ -1052,35 +1067,19 @@ }, [inputRef, lastEventType]);
 
-  var rafIds = useLazyRef.useLazyRef(function () {
-    return new Set();
-  });
-  React.useEffect(function () {
-    return function () {
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      rafIds.current.forEach(function (id) {
-        return cancelAnimationFrame(id);
-      });
-    };
-  }, [rafIds]);
-  return function handleBlur() {
-    var ownerDocument$1 = ownerDocument.getOwnerDocument(popoverRef.current);
+  return function handleBlur(event) {
+    var popover = popoverRef.current;
+    var input = inputRef.current;
+    var button = buttonRef.current;
+    var activeElement = event.relatedTarget; // we on want to close only if focus propss outside the combobox
 
-    if (!ownerDocument$1) {
-      return;
-    }
-
-    var rafId = requestAnimationFrame(function () {
-      // we on want to close only if focus propss outside the combobox
-      if (ownerDocument$1.activeElement !== inputRef.current && ownerDocument$1.activeElement !== buttonRef.current && popoverRef.current) {
-        if (popoverRef.current.contains(ownerDocument$1.activeElement)) {
-          // focus landed inside the combobox, keep it open
-          if (state !== INTERACTING) {
-            transition(INTERACT);
-          }
-        } else {
-          // focus landed outside the combobox, close it.
-          transition(BLUR);
+    if (activeElement !== input && activeElement !== button && popover) {
+      if (popover.contains(activeElement)) {
+        // focus landed inside the combobox, keep it open
+        if (state !== INTERACTING) {
+          transition(INTERACT);
         }
+      } else {
+        // focus landed outside the combobox, close it.
+        transition(BLUR);
       }
-    });
-    rafIds.current.add(rafId);
+    }
   };
@@ -1156,4 +1155,16 @@ }
   return hash;
-}
+} // function getActiveElement(node: Element | null | undefined) {
+//   let activeElement: Element | null = null;
+//   try {
+//     // If Element.getRootNode is supported, we'll retrieve either the root
+//     // Document or shadow root depending on where the component is rendered.
+//     // https://github.com/reach/reach-ui/issues/787
+//     activeElement = (node?.getRootNode() as ShadowRoot | Document)
+//       .activeElement;
+//   } finally {
+//     return activeElement || (node?.ownerDocument || document).activeElement;
+//   }
+// }
 
+
 function getDataState(state) {
@@ -1160,0 +1171,0 @@ return state.toLowerCase();

dist/reach-combobox.esm.js

 import { forwardRef, useRef, createElement, useContext, useCallback, useEffect, useMemo, Fragment, useState, useReducer } from 'react';
 import PropTypes from 'prop-types';
 import { useIsomorphicLayoutEffect } from '@reach/utils/use-isomorphic-layout-effect';
-import { getOwnerDocument } from '@reach/utils/owner-document';
 import { createNamedContext } from '@reach/utils/context';
@@ -11,3 +10,2 @@ import { isFunction } from '@reach/utils/type-check';
 import { useComposedRefs } from '@reach/utils/compose-refs';
-import { useLazyRef } from '@reach/utils/use-lazy-ref';
 import { useUpdateEffect } from '@reach/utils/use-update-effect';
@@ -223,2 +221,9 @@ import { composeEventHandlers } from '@reach/utils/compose-event-handlers';
 
+var _excluded = ["onSelect", "openOnFocus", "children", "as", "aria-label", "aria-labelledby"],
+    _excluded2 = ["as", "selectOnClick", "autocomplete", "onClick", "onChange", "onKeyDown", "onBlur", "onFocus", "value"],
+    _excluded3 = ["as", "children", "portal", "onKeyDown", "onBlur", "position"],
+    _excluded4 = ["persistSelection", "as"],
+    _excluded5 = ["as", "children", "value", "onClick"],
+    _excluded6 = ["as", "onClick", "onKeyDown"];
+
 var _on, _on2, _on3, _on4, _states;
@@ -259,2 +264,3 @@ ////////////////////////////////////////////////////////////////////////////////
 var OPEN_WITH_BUTTON = "OPEN_WITH_BUTTON";
+var OPEN_WITH_INPUT_CLICK = "OPEN_WITH_INPUT_CLICK";
 var CLOSE_WITH_BUTTON = "CLOSE_WITH_BUTTON"; ////////////////////////////////////////////////////////////////////////////////
@@ -265,3 +271,3 @@
   states: (_states = {}, _states[IDLE] = {
-    on: (_on = {}, _on[BLUR] = IDLE, _on[CLEAR] = IDLE, _on[CHANGE] = SUGGESTING, _on[INITIAL_CHANGE] = IDLE, _on[FOCUS] = SUGGESTING, _on[NAVIGATE] = NAVIGATING, _on[OPEN_WITH_BUTTON] = SUGGESTING, _on)
+    on: (_on = {}, _on[BLUR] = IDLE, _on[CLEAR] = IDLE, _on[CHANGE] = SUGGESTING, _on[INITIAL_CHANGE] = IDLE, _on[FOCUS] = SUGGESTING, _on[NAVIGATE] = NAVIGATING, _on[OPEN_WITH_BUTTON] = SUGGESTING, _on[OPEN_WITH_INPUT_CLICK] = SUGGESTING, _on)
   }, _states[SUGGESTING] = {
@@ -291,2 +297,3 @@ on: (_on2 = {}, _on2[CHANGE] = SUGGESTING, _on2[FOCUS] = SUGGESTING, _on2[NAVIGATE] = NAVIGATING, _on2[CLEAR] = IDLE, _on2[ESCAPE] = IDLE, _on2[BLUR] = IDLE, _on2[SELECT_WITH_CLICK] = IDLE, _on2[INTERACT] = INTERACTING, _on2[CLOSE_WITH_BUTTON] = IDLE, _on2)
     case OPEN_WITH_BUTTON:
+    case OPEN_WITH_INPUT_CLICK:
       return _extends({}, nextState, {
@@ -386,3 +393,3 @@ navigationValue: findNavigationValue(nextState, event)
       ariaLabelledby = _ref["aria-labelledby"],
-      props = _objectWithoutPropertiesLoose(_ref, ["onSelect", "openOnFocus", "children", "as", "aria-label", "aria-labelledby"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
@@ -403,4 +410,4 @@ var _useDescendantsInit = useDescendantsInit(),
 
-  var autocompletePropRef = useRef();
-  var persistSelectionRef = useRef();
+  var autocompletePropRef = useRef(false);
+  var persistSelectionRef = useRef(false);
   var defaultData = {
@@ -492,3 +499,3 @@ // The value the user has typed. We derive this also when the developer is
       controlledValue = _ref2.value,
-      props = _objectWithoutPropertiesLoose(_ref2, ["as", "selectOnClick", "autocomplete", "onClick", "onChange", "onKeyDown", "onBlur", "onFocus", "value"]);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
 
@@ -583,5 +590,11 @@ // https://github.com/reach/reach-ui/issues/464
     if (selectOnClickRef.current) {
+      var _inputRef$current;
+
       selectOnClickRef.current = false;
-      inputRef.current.select();
+      (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.select();
     }
+
+    if (openOnFocus && state === IDLE) {
+      transition(OPEN_WITH_INPUT_CLICK);
+    }
   }
@@ -641,3 +654,3 @@
       position = _ref3$position === void 0 ? positionMatchWidth : _ref3$position,
-      props = _objectWithoutPropertiesLoose(_ref3, ["as", "children", "portal", "onKeyDown", "onBlur", "position"]);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
 
@@ -701,3 +714,3 @@ var _React$useContext2 = useContext(ComboboxContext),
       Comp = _ref4$as === void 0 ? "ul" : _ref4$as,
-      props = _objectWithoutPropertiesLoose(_ref4, ["persistSelection", "as"]);
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
 
@@ -743,3 +756,3 @@ var _React$useContext3 = useContext(ComboboxContext),
       onClick = _ref5.onClick,
-      props = _objectWithoutPropertiesLoose(_ref5, ["as", "children", "value", "onClick"]);
+      props = _objectWithoutPropertiesLoose(_ref5, _excluded5);
 
@@ -853,3 +866,3 @@ var _React$useContext4 = useContext(ComboboxContext),
       onKeyDown = _ref6.onKeyDown,
-      props = _objectWithoutPropertiesLoose(_ref6, ["as", "onClick", "onKeyDown"]);
+      props = _objectWithoutPropertiesLoose(_ref6, _excluded6);
 
@@ -907,3 +920,5 @@ var _React$useContext7 = useContext(ComboboxContext),
     if (lastEventType === NAVIGATE || lastEventType === ESCAPE || lastEventType === SELECT_WITH_CLICK || lastEventType === OPEN_WITH_BUTTON) {
-      inputRef.current.focus();
+      var _inputRef$current2;
+
+      (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.focus();
     }
@@ -1092,35 +1107,19 @@ }, [inputRef, lastEventType]);
 
-  var rafIds = useLazyRef(function () {
-    return new Set();
-  });
-  useEffect(function () {
-    return function () {
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      rafIds.current.forEach(function (id) {
-        return cancelAnimationFrame(id);
-      });
-    };
-  }, [rafIds]);
-  return function handleBlur() {
-    var ownerDocument = getOwnerDocument(popoverRef.current);
+  return function handleBlur(event) {
+    var popover = popoverRef.current;
+    var input = inputRef.current;
+    var button = buttonRef.current;
+    var activeElement = event.relatedTarget; // we on want to close only if focus propss outside the combobox
 
-    if (!ownerDocument) {
-      return;
-    }
-
-    var rafId = requestAnimationFrame(function () {
-      // we on want to close only if focus propss outside the combobox
-      if (ownerDocument.activeElement !== inputRef.current && ownerDocument.activeElement !== buttonRef.current && popoverRef.current) {
-        if (popoverRef.current.contains(ownerDocument.activeElement)) {
-          // focus landed inside the combobox, keep it open
-          if (state !== INTERACTING) {
-            transition(INTERACT);
-          }
-        } else {
-          // focus landed outside the combobox, close it.
-          transition(BLUR);
+    if (activeElement !== input && activeElement !== button && popover) {
+      if (popover.contains(activeElement)) {
+        // focus landed inside the combobox, keep it open
+        if (state !== INTERACTING) {
+          transition(INTERACT);
         }
+      } else {
+        // focus landed outside the combobox, close it.
+        transition(BLUR);
       }
-    });
-    rafIds.current.add(rafId);
+    }
   };
@@ -1196,4 +1195,16 @@ }
   return hash;
-}
+} // function getActiveElement(node: Element | null | undefined) {
+//   let activeElement: Element | null = null;
+//   try {
+//     // If Element.getRootNode is supported, we'll retrieve either the root
+//     // Document or shadow root depending on where the component is rendered.
+//     // https://github.com/reach/reach-ui/issues/787
+//     activeElement = (node?.getRootNode() as ShadowRoot | Document)
+//       .activeElement;
+//   } finally {
+//     return activeElement || (node?.ownerDocument || document).activeElement;
+//   }
+// }
 
+
 function getDataState(state) {
@@ -1200,0 +1211,0 @@ return state.toLowerCase();

package.json

 {
   "name": "@reach/combobox",
-  "version": "0.15.1",
+  "version": "0.15.2",
   "description": "Accessible React Combobox (Autocomplete).",
@@ -16,9 +16,9 @@ "author": "React Training <[e-mail]>",
   "dependencies": {
-    "@reach/auto-id": "0.15.0",
-    "@reach/descendants": "0.15.0",
-    "@reach/popover": "0.15.0",
-    "@reach/portal": "0.15.0",
-    "@reach/utils": "0.15.0",
+    "@reach/auto-id": "0.15.2",
+    "@reach/descendants": "0.15.2",
+    "@reach/popover": "0.15.2",
+    "@reach/portal": "0.15.2",
+    "@reach/utils": "0.15.2",
     "prop-types": "^15.7.2",
-    "tslib": "^2.1.0"
+    "tslib": "^2.3.0"
   },
@@ -46,3 +46,3 @@ "devDependencies": {
   ],
-  "gitHead": "18b182e30cebca0b89322127bea81b05301805ac"
+  "gitHead": "353f409a296a648c4fe2c2d06b14a39b7b6dc3e1"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

137900

increased by1.14%

Lines of code

3554

increased by0.59%

Dependency changes

• + Added@reach/auto-id@0.15.2(transitive)

• + Added@reach/descendants@0.15.2(transitive)

• + Added@reach/popover@0.15.2(transitive)

• + Added@reach/portal@0.15.2(transitive)

• + Added@reach/rect@0.15.2(transitive)

• + Added@reach/utils@0.15.2(transitive)

• - Removed@reach/auto-id@0.15.0(transitive)

• - Removed@reach/descendants@0.15.0(transitive)

• - Removed@reach/popover@0.15.0(transitive)

• - Removed@reach/portal@0.15.0(transitive)

• - Removed@reach/rect@0.15.0(transitive)

• - Removed@reach/utils@0.15.0(transitive)

• Updated@reach/auto-id@0.15.2

• Updated@reach/descendants@0.15.2

• Updated@reach/popover@0.15.2

• Updated@reach/portal@0.15.2

• Updated@reach/utils@0.15.2

• Updatedtslib@^2.3.0