npm package diff

Package: @chakra-ui/react

Versions: 2.10.1 - 2.10.2

File: package/dist/cjs/popover/use-popover.cjs

Index: package/dist/cjs/popover/use-popover.cjs
===================================================================
--- package/dist/cjs/popover/use-popover.cjs
+++ package/dist/cjs/popover/use-popover.cjs
@@ -29,8 +29,10 @@
     computePositionOnMount,
     ...popperProps
   } = props;
   const { isOpen, onClose, onOpen, onToggle } = hooks.useDisclosure(props);
+  const [restoreFocus, setRestoreFocus] = react.useState(returnFocusOnClose);
+  react.useEffect(() => setRestoreFocus(returnFocusOnClose), [returnFocusOnClose]);
   const anchorRef = react.useRef(null);
   const triggerRef = react.useRef(null);
   const popoverRef = react.useRef(null);
   const isHoveringRef = react.useRef(false);
@@ -65,15 +67,30 @@
   });
   hooks.useFocusOnHide(popoverRef, {
     focusRef: triggerRef,
     visible: isOpen,
-    shouldFocus: returnFocusOnClose && trigger === TRIGGER.click
+    shouldFocus: restoreFocus && trigger === TRIGGER.click
   });
   hooks.useFocusOnShow(popoverRef, {
     focusRef: initialFocusRef,
     visible: isOpen,
     shouldFocus: autoFocus && trigger === TRIGGER.click
   });
+  hooks.useOutsideClick({
+    enabled: isOpen && closeOnBlur,
+    ref: popoverRef,
+    handler(event) {
+      const relatedTarget = event.composedPath?.()[0] ?? [
+        event.target
+      ];
+      if (contains(triggerRef.current, relatedTarget))
+        return;
+      if (relatedTarget) {
+        setRestoreFocus(!utils.isFocusable(relatedTarget));
+      }
+      onClose();
+    }
+  });
   const shouldRenderChildren = utils.lazyDisclosure({
     wasSelected: hasBeenOpened.current,
     enabled: isLazy,
     mode: lazyBehavior,
@@ -94,8 +111,10 @@
         id: popoverId,
         tabIndex: -1,
         role: "dialog",
         onKeyDown: utils.callAllHandlers(props2.onKeyDown, (event) => {
+          if (event.nativeEvent.isComposing)
+            return;
           if (closeOnEsc && event.key === "Escape") {
             event.preventDefault();
             event.stopPropagation();
             onClose();
@@ -105,8 +124,11 @@
           const relatedTarget = getRelatedTarget(event);
           const targetIsPopover = contains(popoverRef.current, relatedTarget);
           const targetIsTrigger = contains(triggerRef.current, relatedTarget);
           const isValidBlur = !targetIsPopover && !targetIsTrigger;
+          if (relatedTarget) {
+            setRestoreFocus(!utils.isFocusable(relatedTarget));
+          }
           if (isOpen && closeOnBlur && isValidBlur) {
             onClose();
           }
         }),