@charcoal-ui/react 5.2.0 → 5.3.0-beta.1

package/src/components/DropdownSelector/DropdownPopover.tsx

@@ -44,6 +44,7 @@ export function DropdownPopover({ children, ...props }: DropdownPopoverProps) {
       onClose={props.onClose}
       popoverRef={ref}
       triggerRef={props.triggerRef}
+      inertWorkaround={props.inertWorkaround}
     >
       {children}
     </Popover>

package/src/components/DropdownSelector/Popover/index.tsx

@@ -11,6 +11,15 @@ export type PopoverProps = {
   children: ReactNode
   triggerRef: RefObject<Element | null>
   popoverRef?: RefObject<HTMLDivElement | null>
+  /**
+   * A tmp workaround for react-aria above 3.27.3 setting overlay element to inert and causing background to be clickable.
+   * This may become default at next major.
+   * https://github.com/adobe/react-spectrum/pull/8796
+   * https://github.com/adobe/react-spectrum/issues/8784
+   *
+   * @default false
+   */
+  inertWorkaround?: boolean
 }
 
 const _empty = () => null
@@ -50,6 +59,10 @@ export default function Popover(props: PopoverProps) {
     <Overlay portalContainer={document.body}>
       <div
         {...underlayProps}
+        // https://github.com/adobe/react-spectrum/issues/8784#issuecomment-3234771154
+        {...(props.inertWorkaround
+          ? { 'data-react-aria-top-layer': true, onClick: props.onClose }
+          : {})}
         style={{
           position: 'fixed',
           zIndex:

package/src/components/DropdownSelector/index.tsx

@@ -11,6 +11,7 @@ import { useVisuallyHidden } from '@react-aria/visually-hidden'
 import { AssistiveText } from '../TextField/AssistiveText'
 import { useClassNames } from '../../_lib/useClassNames'
 import { useId } from '@react-aria/utils'
+import { PopoverProps } from './Popover'
 
 export type DropdownSelectorProps = {
   label: string
@@ -30,7 +31,7 @@ export type DropdownSelectorProps = {
   children: MenuListChildren
   onChange: (value: string) => void
   className?: string
-}
+} & Pick<PopoverProps, 'inertWorkaround'>
 
 export default function DropdownSelector({
   onChange,
@@ -126,6 +127,7 @@ export default function DropdownSelector({
           onClose={() => setIsOpen(false)}
           triggerRef={triggerRef}
           value={props.value}
+          inertWorkaround={props.inertWorkaround}
         >
           <MenuList
             value={props.value}