chore: safe lock of content

Author: zombieJ

src/Dialog/Content/Panel.tsx

@@ -13,6 +13,8 @@ export interface PanelProps extends Omit<IDialogPropTypes, 'getOpenCount'> {
   onMouseDown?: React.MouseEventHandler;
   onMouseUp?: React.MouseEventHandler;
   holderRef?: React.Ref<HTMLDivElement>;
+  /** Used for focus lock. When true and open, focus will lock into the panel */
+  isFixedPos?: boolean;
 }
 
 export type PanelRef = {
@@ -43,14 +45,15 @@ const Panel = React.forwardRef<PanelRef, PanelProps>((props, ref) => {
     height,
     classNames: modalClassNames,
     styles: modalStyles,
+    isFixedPos,
   } = props;
 
   // ================================= Refs =================================
   const { panel: panelRef } = React.useContext(RefContext);
   const internalRef = useRef<HTMLDivElement>(null);
   const mergedRef = useComposeRef(holderRef, panelRef, internalRef);
 
-  useLockFocus(visible, () => internalRef.current);
+  useLockFocus(visible && isFixedPos, () => internalRef.current);
 
   React.useImperativeHandle(ref, () => ({
     focus: () => {

src/Dialog/index.tsx

@@ -59,6 +59,7 @@ const Dialog: React.FC<IDialogPropTypes> = (props) => {
   const contentRef = useRef<ContentRef>(null);
 
   const [animatedVisible, setAnimatedVisible] = React.useState(visible);
+  const [isFixedPos, setIsFixedPos] = React.useState(true);
 
   // ========================== Init ==========================
   const ariaId = useId();
@@ -154,6 +155,12 @@ const Dialog: React.FC<IDialogPropTypes> = (props) => {
     if (visible) {
       setAnimatedVisible(true);
       saveLastOutSideActiveElementRef();
+
+      // Calc the position style
+      if (wrapperRef.current) {
+        const computedWrapStyle = getComputedStyle(wrapperRef.current);
+        setIsFixedPos(computedWrapStyle.position === 'absolute');
+      }
     } else if (
       animatedVisible &&
       contentRef.current.enableMotion() &&
@@ -203,6 +210,7 @@ const Dialog: React.FC<IDialogPropTypes> = (props) => {
       >
         <Content
           {...props}
+          isFixedPos={isFixedPos}
           onMouseDown={onContentMouseDown}
           onMouseUp={onContentMouseUp}
           ref={contentRef}