fix: prevent scroll when modal container and sentinel get focused (#430)

* fix: prevent scroll when modal container and sentinel get focused * Update src/Dialog/index.tsx
react-component · Jun 4, 2024 · 2f48630 · 2f48630
1 parent aa5497d
commit 2f48630
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 7 deletions.
diff --git a/src/Dialog/Content/Panel.tsx b/src/Dialog/Content/Panel.tsx
@@ -59,14 +59,14 @@ const Panel = React.forwardRef<ContentRef, PanelProps>((props, ref) => {
 
   React.useImperativeHandle(ref, () => ({
     focus: () => {
-      entityRef.current?.focus();
+      entityRef.current?.focus({ preventScroll: true });
     },
     changeActive: (next) => {
       const { activeElement } = document;
       if (next && activeElement === sentinelEndRef.current) {
-        sentinelStartRef.current.focus();
+        sentinelStartRef.current.focus({ preventScroll: true });
       } else if (!next && activeElement === sentinelStartRef.current) {
-        sentinelEndRef.current.focus();
+        sentinelEndRef.current.focus({ preventScroll: true });
       }
     },
   }));

diff --git a/src/Dialog/index.tsx b/src/Dialog/index.tsx
@@ -143,10 +143,8 @@ const Dialog: React.FC<IDialogPropTypes> = (props) => {
     }
 
     // keep focus inside dialog
-    if (visible) {
-      if (e.keyCode === KeyCode.TAB) {
-        contentRef.current.changeActive(!e.shiftKey);
-      }
+    if (visible && e.keyCode === KeyCode.TAB) {
+      contentRef.current.changeActive(!e.shiftKey);
     }
   }