[@mantine/core] FocusTrap: Improve compatibility with React 19 (#6492)

mantinedev · Jul 12, 2024 · 3d36f0e · 3d36f0e
1 parent 1bdb948
commit 3d36f0e
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 14 deletions.
diff --git a/packages/@mantine/core/src/components/FocusTrap/FocusTrap.tsx b/packages/@mantine/core/src/components/FocusTrap/FocusTrap.tsx
@@ -12,15 +12,19 @@ export interface FocusTrapProps {
 
   /** Prop that should be used to access component ref */
   refProp?: string;
+
+  /** Assigns element `ref` */
+  innerRef?: React.ForwardedRef<any>;
 }
 
 export function FocusTrap({
   children,
   active = true,
   refProp = 'ref',
+  innerRef,
 }: FocusTrapProps): React.ReactElement {
   const focusTrapRef = useFocusTrap(active);
-  const ref = useMergedRef(focusTrapRef, children?.ref);
+  const ref = useMergedRef(focusTrapRef, innerRef);
 
   if (!isElement(children)) {
     return children;

diff --git a/packages/@mantine/core/src/components/ModalBase/ModalBaseContent.tsx b/packages/@mantine/core/src/components/ModalBase/ModalBaseContent.tsx
@@ -26,14 +26,6 @@ export const ModalBaseContent = forwardRef<HTMLDivElement, _ModalBaseContentProp
   ({ transitionProps, className, innerProps, onKeyDown, style, ...others }, ref) => {
     const ctx = useModalBaseContext();
 
-    // const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-    //   const shouldTrigger =
-    //     (event.target as HTMLElement)?.getAttribute('data-mantine-stop-propagation') !== 'true';
-    //   console.log((event.target as HTMLElement)?.getAttribute('data-mantine-stop-propagation'));
-    //   shouldTrigger && event.key === 'Escape' && ctx.closeOnEscape && ctx.onClose();
-    //   onKeyDown?.(event);
-    // };
-
     return (
       <Transition
         mounted={ctx.opened}
@@ -46,7 +38,7 @@ export const ModalBaseContent = forwardRef<HTMLDivElement, _ModalBaseContentProp
             {...innerProps}
             className={cx({ [classes.inner]: !ctx.unstyled }, innerProps.className)}
           >
-            <FocusTrap active={ctx.opened && ctx.trapFocus}>
+            <FocusTrap active={ctx.opened && ctx.trapFocus} innerRef={ref}>
               <Paper
                 {...others}
                 component="section"
@@ -55,8 +47,6 @@ export const ModalBaseContent = forwardRef<HTMLDivElement, _ModalBaseContentProp
                 aria-modal
                 aria-describedby={ctx.bodyMounted ? ctx.getBodyId() : undefined}
                 aria-labelledby={ctx.titleMounted ? ctx.getTitleId() : undefined}
-                // onKeyDown={handleKeyDown}
-                ref={ref}
                 style={[style, transitionStyles]}
                 className={cx({ [classes.content]: !ctx.unstyled }, className)}
                 unstyled={ctx.unstyled}

diff --git a/packages/@mantine/core/src/components/Popover/PopoverDropdown/PopoverDropdown.tsx b/packages/@mantine/core/src/components/Popover/PopoverDropdown/PopoverDropdown.tsx
@@ -83,12 +83,11 @@ export const PopoverDropdown = factory<PopoverDropdownFactory>((_props, ref) =>
         }
       >
         {(transitionStyles) => (
-          <FocusTrap active={ctx.trapFocus}>
+          <FocusTrap active={ctx.trapFocus} innerRef={mergedRef}>
             <Box
               {...accessibleProps}
               {...others}
               variant={variant}
-              ref={mergedRef}
               onKeyDownCapture={closeOnEscape(ctx.onClose, {
                 active: ctx.closeOnEscape,
                 onTrigger: returnFocus,