@allxsmith/bestax-bulma 5.34.1 → 5.34.2

package/dist/esm/form/_pickerInternals/PickerPopover.js

@@ -5,6 +5,7 @@ import { createPortal } from 'react-dom';
 import { usePrefixedClassNames, classNames } from '../../helpers/classNames.js';
 import { useFocusTrap } from '../../helpers/useFocusTrap.js';
 import { usePortalContainer } from '../../helpers/portal.js';
+import { isEventInside } from '../../helpers/shadowDom.js';
 import { useAnchoredPosition, marginGap } from '../../helpers/useAnchoredPosition.js';
 
 const isBrowser = typeof window !== 'undefined';
@@ -48,13 +49,20 @@ const PickerPopover = ({ isOpen, onClose, anchorRef, children, position = 'botto
         return () => document.removeEventListener('pointerdown', handler);
     }, [isOpen, closeOnClickOutside, anchorRef, onClose]);
     // Escape closes it, and so does Alt+ArrowUp, the combobox's key for it,
-    // which the calendar and the time wheels inside leave to it.
+    // which the calendar and the time wheels inside leave to it. Escape closes
+    // it from anywhere, but the key is only the picker's when it was pressed in
+    // the panel or the field: then it's marked used, so a Modal or Sidebar
+    // around the picker stays open. From anywhere else, such as a dialog opened
+    // over the picker, the key goes on to whatever has focus.
     useEffect(() => {
         if (!isOpen || !closeOnEscape || !isBrowser)
             return undefined;
         const handler = (e) => {
             if (e.key === 'Escape') {
-                e.stopPropagation();
+                if (isEventInside(e, panelRef.current) ||
+                    isEventInside(e, anchorRef.current)) {
+                    e.preventDefault();
+                }
                 onClose();
             }
             else if (e.altKey && e.key === 'ArrowUp') {
@@ -65,7 +73,7 @@ const PickerPopover = ({ isOpen, onClose, anchorRef, children, position = 'botto
         };
         document.addEventListener('keydown', handler);
         return () => document.removeEventListener('keydown', handler);
-    }, [isOpen, closeOnEscape, onClose]);
+    }, [isOpen, closeOnEscape, anchorRef, onClose]);
     useFocusTrap(panelRef, {
         active: isOpen && trapFocus,
         initialFocusRef,

package/dist/esm/form/_pickerInternals/PickerPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"PickerPopover.js","sources":["../../../../src/form/_pickerInternals/PickerPopover.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport { classNames, usePrefixedClassNames } from '../../helpers/classNames';\nimport { useFocusTrap } from '../../helpers/useFocusTrap';\nimport { usePortalContainer } from '../../helpers/portal';\nimport {\n  marginGap,\n  useAnchoredPosition,\n} from '../../helpers/useAnchoredPosition';\nimport { PickerPosition } from './pickerTypes';\n\nexport interface PickerPopoverProps {\n  isOpen: boolean;\n  onClose: () => void;\n  anchorRef: React.RefObject<HTMLElement | null>;\n  children: React.ReactNode;\n  position?: PickerPosition;\n  appendToBody?: boolean;\n  className?: string;\n  trapFocus?: boolean;\n  closeOnClickOutside?: boolean;\n  /** Close on Escape and on Alt+ArrowUp. Default `true`. */\n  closeOnEscape?: boolean;\n  ariaLabel?: string;\n  ariaLabelledBy?: string;\n  role?: 'dialog' | 'group';\n  id?: string;\n  /**\n   * Where focus goes when the popover closes. Without it, focus goes back to\n   * whatever had it when the focus trap turned on, which is read after the\n   * panel's content mounts: a calendar that focuses a cell as it mounts\n   * would be recorded instead, and that cell leaves with the panel.\n   */\n  restoreFocusRef?: React.RefObject<HTMLElement | null>;\n  /**\n   * Selects the element in the panel that takes focus as it opens, such as a\n   * calendar's focused date rather than the first button in its header. When\n   * nothing matches, or the match can't take focus, the first tab stop does.\n   */\n  initialFocusSelector?: string;\n}\n\nconst isBrowser = typeof window !== 'undefined';\n\nexport const PickerPopover: React.FC<PickerPopoverProps> = ({\n  isOpen,\n  onClose,\n  anchorRef,\n  children,\n  position = 'bottom-left',\n  appendToBody = false,\n  className,\n  trapFocus = true,\n  closeOnClickOutside = true,\n  closeOnEscape = true,\n  ariaLabel,\n  ariaLabelledBy,\n  role = 'dialog',\n  id,\n  restoreFocusRef,\n  initialFocusSelector,\n}) => {\n  const panelRef = useRef<HTMLDivElement>(null);\n  const resolveContainer = usePortalContainer();\n  // Read as the trap turns on, once the panel's content has rendered.\n  const initialFocusRef = useMemo(\n    () =>\n      initialFocusSelector === undefined\n        ? undefined\n        : {\n            get current() {\n              return (\n                panelRef.current?.querySelector<HTMLElement>(\n                  initialFocusSelector\n                ) ?? null\n              );\n            },\n          },\n    [initialFocusSelector]\n  );\n  const resolved = useAnchoredPosition(anchorRef, panelRef, {\n    active: isOpen,\n    position,\n    fixed: appendToBody,\n    // The gap comes from `--bulma-picker-popover-offset` as a margin, in place\n    // or portaled, so the coordinates leave it out and `auto` reads it off\n    // the panel.\n    offset: 0,\n    styledGap: marginGap,\n  });\n\n  useEffect(() => {\n    if (!isOpen || !closeOnClickOutside || !isBrowser) return undefined;\n    // Listen on `pointerdown` (rather than `mousedown`) so touch starts\n    // outside the popover dismiss it on mobile — including swipe-from-outside\n    // gestures, where the synthetic mouse event would otherwise lag a few\n    // hundred ms behind the actual touch.\n    const handler = (e: PointerEvent) => {\n      const path = e.composedPath();\n      if (panelRef.current && path.includes(panelRef.current)) return;\n      if (anchorRef.current && path.includes(anchorRef.current)) return;\n      onClose();\n    };\n    document.addEventListener('pointerdown', handler);\n    return () => document.removeEventListener('pointerdown', handler);\n  }, [isOpen, closeOnClickOutside, anchorRef, onClose]);\n\n  // Escape closes it, and so does Alt+ArrowUp, the combobox's key for it,\n  // which the calendar and the time wheels inside leave to it.\n  useEffect(() => {\n    if (!isOpen || !closeOnEscape || !isBrowser) return undefined;\n    const handler = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.stopPropagation();\n        onClose();\n      } else if (e.altKey && e.key === 'ArrowUp') {\n        e.preventDefault();\n        e.stopPropagation();\n        onClose();\n      }\n    };\n    document.addEventListener('keydown', handler);\n    return () => document.removeEventListener('keydown', handler);\n  }, [isOpen, closeOnEscape, onClose]);\n\n  useFocusTrap(panelRef, {\n    active: isOpen && trapFocus,\n    initialFocusRef,\n    restoreFocus: restoreFocusRef ?? true,\n  });\n\n  const panelClass = usePrefixedClassNames('picker-popover', {\n    'is-active': isOpen,\n    [`is-${resolved.position}`]: true,\n    'is-portal': appendToBody,\n  });\n\n  if (!isOpen) return null;\n\n  const style: React.CSSProperties = appendToBody\n    ? {\n        position: 'fixed',\n        top: resolved.top,\n        left: resolved.left,\n      }\n    : {};\n\n  const panel = (\n    <div\n      ref={panelRef}\n      id={id}\n      role={role}\n      aria-modal={role === 'dialog' ? 'false' : undefined}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      tabIndex={-1}\n      className={classNames(panelClass, className)}\n      style={style}\n    >\n      {children}\n    </div>\n  );\n\n  if (appendToBody && isBrowser) {\n    return createPortal(panel, resolveContainer());\n  }\n  return panel;\n};\n\nPickerPopover.displayName = 'PickerPopover';\n\nexport default PickerPopover;\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"PickerPopover.js","sources":["../../../../src/form/_pickerInternals/PickerPopover.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport { classNames, usePrefixedClassNames } from '../../helpers/classNames';\nimport { useFocusTrap } from '../../helpers/useFocusTrap';\nimport { usePortalContainer } from '../../helpers/portal';\nimport { isEventInside } from '../../helpers/shadowDom';\nimport {\n  marginGap,\n  useAnchoredPosition,\n} from '../../helpers/useAnchoredPosition';\nimport { PickerPosition } from './pickerTypes';\n\nexport interface PickerPopoverProps {\n  isOpen: boolean;\n  onClose: () => void;\n  anchorRef: React.RefObject<HTMLElement | null>;\n  children: React.ReactNode;\n  position?: PickerPosition;\n  appendToBody?: boolean;\n  className?: string;\n  trapFocus?: boolean;\n  closeOnClickOutside?: boolean;\n  /** Close on Escape and on Alt+ArrowUp. Default `true`. */\n  closeOnEscape?: boolean;\n  ariaLabel?: string;\n  ariaLabelledBy?: string;\n  role?: 'dialog' | 'group';\n  id?: string;\n  /**\n   * Where focus goes when the popover closes. Without it, focus goes back to\n   * whatever had it when the focus trap turned on, which is read after the\n   * panel's content mounts: a calendar that focuses a cell as it mounts\n   * would be recorded instead, and that cell leaves with the panel.\n   */\n  restoreFocusRef?: React.RefObject<HTMLElement | null>;\n  /**\n   * Selects the element in the panel that takes focus as it opens, such as a\n   * calendar's focused date rather than the first button in its header. When\n   * nothing matches, or the match can't take focus, the first tab stop does.\n   */\n  initialFocusSelector?: string;\n}\n\nconst isBrowser = typeof window !== 'undefined';\n\nexport const PickerPopover: React.FC<PickerPopoverProps> = ({\n  isOpen,\n  onClose,\n  anchorRef,\n  children,\n  position = 'bottom-left',\n  appendToBody = false,\n  className,\n  trapFocus = true,\n  closeOnClickOutside = true,\n  closeOnEscape = true,\n  ariaLabel,\n  ariaLabelledBy,\n  role = 'dialog',\n  id,\n  restoreFocusRef,\n  initialFocusSelector,\n}) => {\n  const panelRef = useRef<HTMLDivElement>(null);\n  const resolveContainer = usePortalContainer();\n  // Read as the trap turns on, once the panel's content has rendered.\n  const initialFocusRef = useMemo(\n    () =>\n      initialFocusSelector === undefined\n        ? undefined\n        : {\n            get current() {\n              return (\n                panelRef.current?.querySelector<HTMLElement>(\n                  initialFocusSelector\n                ) ?? null\n              );\n            },\n          },\n    [initialFocusSelector]\n  );\n  const resolved = useAnchoredPosition(anchorRef, panelRef, {\n    active: isOpen,\n    position,\n    fixed: appendToBody,\n    // The gap comes from `--bulma-picker-popover-offset` as a margin, in place\n    // or portaled, so the coordinates leave it out and `auto` reads it off\n    // the panel.\n    offset: 0,\n    styledGap: marginGap,\n  });\n\n  useEffect(() => {\n    if (!isOpen || !closeOnClickOutside || !isBrowser) return undefined;\n    // Listen on `pointerdown` (rather than `mousedown`) so touch starts\n    // outside the popover dismiss it on mobile — including swipe-from-outside\n    // gestures, where the synthetic mouse event would otherwise lag a few\n    // hundred ms behind the actual touch.\n    const handler = (e: PointerEvent) => {\n      const path = e.composedPath();\n      if (panelRef.current && path.includes(panelRef.current)) return;\n      if (anchorRef.current && path.includes(anchorRef.current)) return;\n      onClose();\n    };\n    document.addEventListener('pointerdown', handler);\n    return () => document.removeEventListener('pointerdown', handler);\n  }, [isOpen, closeOnClickOutside, anchorRef, onClose]);\n\n  // Escape closes it, and so does Alt+ArrowUp, the combobox's key for it,\n  // which the calendar and the time wheels inside leave to it. Escape closes\n  // it from anywhere, but the key is only the picker's when it was pressed in\n  // the panel or the field: then it's marked used, so a Modal or Sidebar\n  // around the picker stays open. From anywhere else, such as a dialog opened\n  // over the picker, the key goes on to whatever has focus.\n  useEffect(() => {\n    if (!isOpen || !closeOnEscape || !isBrowser) return undefined;\n    const handler = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        if (\n          isEventInside(e, panelRef.current) ||\n          isEventInside(e, anchorRef.current)\n        ) {\n          e.preventDefault();\n        }\n        onClose();\n      } else if (e.altKey && e.key === 'ArrowUp') {\n        e.preventDefault();\n        e.stopPropagation();\n        onClose();\n      }\n    };\n    document.addEventListener('keydown', handler);\n    return () => document.removeEventListener('keydown', handler);\n  }, [isOpen, closeOnEscape, anchorRef, onClose]);\n\n  useFocusTrap(panelRef, {\n    active: isOpen && trapFocus,\n    initialFocusRef,\n    restoreFocus: restoreFocusRef ?? true,\n  });\n\n  const panelClass = usePrefixedClassNames('picker-popover', {\n    'is-active': isOpen,\n    [`is-${resolved.position}`]: true,\n    'is-portal': appendToBody,\n  });\n\n  if (!isOpen) return null;\n\n  const style: React.CSSProperties = appendToBody\n    ? {\n        position: 'fixed',\n        top: resolved.top,\n        left: resolved.left,\n      }\n    : {};\n\n  const panel = (\n    <div\n      ref={panelRef}\n      id={id}\n      role={role}\n      aria-modal={role === 'dialog' ? 'false' : undefined}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      tabIndex={-1}\n      className={classNames(panelClass, className)}\n      style={style}\n    >\n      {children}\n    </div>\n  );\n\n  if (appendToBody && isBrowser) {\n    return createPortal(panel, resolveContainer());\n  }\n  return panel;\n};\n\nPickerPopover.displayName = 'PickerPopover';\n\nexport default PickerPopover;\n"],"names":["_jsx"],"mappings":"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"}

package/dist/index.cjs

@@ -2563,8 +2563,9 @@ const isBrowser$1 = (win, doc) => typeof win !== 'undefined' && typeof doc !== '
  * the menu, so a letter typed on the trigger does nothing. Escape closes the
  * menu and focuses the trigger, and Tab closes it and lets focus move on.
  * Anything focusable in the menu that isn't an item, such as a field, keeps
- * its own keys apart from Escape and Tab. For a panel built around fields,
- * use `Popover`.
+ * its own keys apart from Escape and Tab, though an Escape it calls
+ * `preventDefault()` on in its own `onKeyDown` stays its own and leaves the
+ * menu open. For a panel built around fields, use `Popover`.
  *
  * @function
  * @param {DropdownProps} props - Props for the Dropdown component.
@@ -2741,8 +2742,12 @@ const DropdownComponent = React.forwardRef(function DropdownComponent({ label, c
         // Closing is Dropdown's: Escape and Tab close the menu from anywhere in
         // it, a field included, and an empty or all-disabled menu too. Moving
         // between the items, running them and typeahead are the hook's, which
-        // acts only while focus is on the menu or one of its items.
+        // acts only while focus is on the menu or one of its items. An Escape
+        // something in the menu already used, such as a field's own list
+        // closing on it, leaves the menu open for the next one.
         if (e.key === 'Escape') {
+            if (e.defaultPrevented)
+                return;
             e.preventDefault();
             setActive(false);
             onActiveChange?.(false);
@@ -4056,6 +4061,9 @@ const ModalRoot = React.forwardRef(function ModalRoot({ active, isActive, onClos
         };
     }, [isModalActive]);
     // Escape closes; Tab cycles inside the modal. Both only for the topmost one.
+    // The listener is on `window`, where a keydown arrives last, so everything
+    // inside the modal has had the key first: React's handlers, and `document`
+    // listeners added after this one, such as a date picker's.
     React.useEffect(() => {
         if (!isModalActive)
             return undefined;
@@ -4065,11 +4073,15 @@ const ModalRoot = React.forwardRef(function ModalRoot({ active, isActive, onClos
                 return;
             }
             if (e.key === 'Escape') {
-                if (closeOnEscape)
+                // Something inside already used this Escape, such as a popup that
+                // closed on it, so the modal waits for the next one.
+                if (closeOnEscape && !e.defaultPrevented)
                     onClose?.();
                 return;
             }
-            if (e.key !== 'Tab' || !node)
+            // A trap inside the modal, such as a portaled popup's, already moved
+            // focus on this Tab, so the modal leaves it where it went.
+            if (e.key !== 'Tab' || !node || e.defaultPrevented)
                 return;
             // Keep Tab within the modal — `aria-modal` hides the rest of the page
             // from assistive technology, so the keyboard order has to agree.
@@ -4094,8 +4106,8 @@ const ModalRoot = React.forwardRef(function ModalRoot({ active, isActive, onClos
                 first.focus();
             }
         };
-        document.addEventListener('keydown', handleKeyDown);
-        return () => document.removeEventListener('keydown', handleKeyDown);
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
     }, [isModalActive, closeOnEscape, onClose]);
     // Move focus into the modal on open, restore it on close
     React.useEffect(() => {
@@ -5375,17 +5387,18 @@ const Loading = ({ active = false, isFullPage = false, size, color, canCancel =
             onCancel();
         }
     };
-    // Handle escape key
+    // Handle escape key. On `window`, as in `Modal`, so a popup on the page has
+    // had the key first, and an Escape it closed on doesn't cancel as well.
     React.useEffect(() => {
         if (!active || !canCancel || !onCancel)
             return;
         const handleKeyDown = (e) => {
-            if (e.key === 'Escape') {
+            if (e.key === 'Escape' && !e.defaultPrevented) {
                 onCancel();
             }
         };
-        document.addEventListener('keydown', handleKeyDown);
-        return () => document.removeEventListener('keydown', handleKeyDown);
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
     }, [active, canCancel, onCancel]);
     // Prevent body scroll when full page loading is active. Ref-counted through
     // the shared helper so an overlapping Modal/Dialog/Sidebar doesn't have its
@@ -7795,17 +7808,18 @@ const SidebarComponent = React.forwardRef(({ isOpen, onClose, position = 'left',
             handleClose();
         }
     }, [overlayClose, handleClose]);
-    // Handle escape key
+    // Handle escape key. On `window`, as in `Modal`, so everything inside the
+    // sidebar has had the key first, and an Escape it used is left to it.
     React.useEffect(() => {
         if (!isOpen || !escapeClose)
             return;
         const handleKeyDown = (e) => {
-            if (e.key === 'Escape') {
+            if (e.key === 'Escape' && !e.defaultPrevented) {
                 handleClose();
             }
         };
-        document.addEventListener('keydown', handleKeyDown);
-        return () => document.removeEventListener('keydown', handleKeyDown);
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
     }, [isOpen, escapeClose, handleClose]);
     // Prevent body scroll when sidebar is open. Ref-counted through the shared
     // helper so an overlapping Modal/Dialog/Loading doesn't unlock underneath.
@@ -8060,17 +8074,19 @@ const Toast = React.forwardRef(({ message, type = 'default', actionType, positio
             document.removeEventListener('click', handleDocumentClick);
         };
     }, [dismissible, isVisible, handleClose]);
+    // On `window`, as in `Modal`, so a popup on the page has had the key
+    // first, and an Escape it closed on doesn't dismiss the toast as well.
     React.useEffect(() => {
-        if (!cancelable)
+        if (!cancelable || !isVisible)
             return undefined;
         const handleKeyDown = (e) => {
-            if (e.key === 'Escape') {
+            if (e.key === 'Escape' && !e.defaultPrevented) {
                 handleClose();
             }
         };
-        document.addEventListener('keydown', handleKeyDown);
-        return () => document.removeEventListener('keydown', handleKeyDown);
-    }, [cancelable, handleClose]);
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [cancelable, isVisible, handleClose]);
     const containerClasses = usePrefixedClassNames('toast-container', {
         [`is-${position}`]: true,
     });
@@ -12655,6 +12671,11 @@ const nothingToAnnounce = [];
  * />
  */
 const Autocomplete = React.forwardRef(({ data = [], value: controlledValue, placeholder, field = 'label', clearable = false, openOnFocus = false, keepFirst = false, keepOpen = false, selectOnClickOutside = false, maxHeight = 200, loading = false, disabled = false, checkInfiniteScroll = false, infiniteScrollDistance = 50, color, size, onInput, onSelect, onActiveChange, onInfiniteScroll, itemTemplate, header, footer, empty, name, form, required, id, 
+// Deprecated no-ops, taken here so they stay off the wrapper.
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- deprecated no-op
+selected, 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- deprecated no-op
+dropdown, 
 // Field props
 label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, className, ...props }, ref) => {
     const insideField = useInsideField();
@@ -12807,7 +12828,10 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
                 }
                 break;
             case 'Escape':
-                e.preventDefault();
+                // Only closing the dropdown claims the key. With it closed, the
+                // key goes on to a Modal around the field.
+                if (menuOpen)
+                    e.preventDefault();
                 setIsActive(false);
                 setHighlightedIndex(-1);
                 break;
@@ -12818,7 +12842,14 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
                 setIsActive(false);
                 break;
         }
-    }, [disabled, isActive, highlightedIndex, filteredData, handleSelect]);
+    }, [
+        disabled,
+        isActive,
+        menuOpen,
+        highlightedIndex,
+        filteredData,
+        handleSelect,
+    ]);
     // Handle dropdown scroll for infinite scroll
     const handleDropdownScroll = React.useCallback(() => {
         if (!checkInfiniteScroll || !dropdownRef.current)
@@ -13192,6 +13223,10 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
                 }
                 break;
             case 'Escape':
+                // Closing the suggestions claims the key, so a Modal around the
+                // field stays open. With none showing, the key goes on to it.
+                if (isActive && filteredData.length > 0)
+                    e.preventDefault();
                 setIsActive(false);
                 setHighlightedIndex(-1);
                 break;
@@ -15053,13 +15088,20 @@ const PickerPopover = ({ isOpen, onClose, anchorRef, children, position = 'botto
         return () => document.removeEventListener('pointerdown', handler);
     }, [isOpen, closeOnClickOutside, anchorRef, onClose]);
     // Escape closes it, and so does Alt+ArrowUp, the combobox's key for it,
-    // which the calendar and the time wheels inside leave to it.
+    // which the calendar and the time wheels inside leave to it. Escape closes
+    // it from anywhere, but the key is only the picker's when it was pressed in
+    // the panel or the field: then it's marked used, so a Modal or Sidebar
+    // around the picker stays open. From anywhere else, such as a dialog opened
+    // over the picker, the key goes on to whatever has focus.
     React.useEffect(() => {
         if (!isOpen || !closeOnEscape || !isBrowser)
             return undefined;
         const handler = (e) => {
             if (e.key === 'Escape') {
-                e.stopPropagation();
+                if (isEventInside(e, panelRef.current) ||
+                    isEventInside(e, anchorRef.current)) {
+                    e.preventDefault();
+                }
                 onClose();
             }
             else if (e.altKey && e.key === 'ArrowUp') {
@@ -15070,7 +15112,7 @@ const PickerPopover = ({ isOpen, onClose, anchorRef, children, position = 'botto
         };
         document.addEventListener('keydown', handler);
         return () => document.removeEventListener('keydown', handler);
-    }, [isOpen, closeOnEscape, onClose]);
+    }, [isOpen, closeOnEscape, anchorRef, onClose]);
     useFocusTrap(panelRef, {
         active: isOpen && trapFocus,
         initialFocusRef,