From 3cb44e01a24c2daaa9682d0c823cec0d117b3d16 Mon Sep 17 00:00:00 2001
From: Rahman <rahmanunver@gmail.com>
Date: Mon, 11 Aug 2025 19:36:40 +0200
Subject: [PATCH] fix(datagrid-web): preventScroll on column selector focus

---
 .../datagrid-web/CHANGELOG.md                 |  4 +++
 .../src/components/ColumnSelector.tsx         | 34 ++++++++-----------
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/packages/pluggableWidgets/datagrid-web/CHANGELOG.md b/packages/pluggableWidgets/datagrid-web/CHANGELOG.md
index 5fd325a808..7d9c8e712a 100644
--- a/packages/pluggableWidgets/datagrid-web/CHANGELOG.md
+++ b/packages/pluggableWidgets/datagrid-web/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- We fixed an issue where the datagrid's horizontal scrollbar would unexpectedly jump to the right when the column selector was enabled.
+
 ### Added
 
 - We implemented a new property to show a refresh indicator. With the refresh indicator, any datasource change shows a progress bar on top of Datagrid 2.
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/ColumnSelector.tsx b/packages/pluggableWidgets/datagrid-web/src/components/ColumnSelector.tsx
index 7d22f3d6c6..27d84e074f 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/ColumnSelector.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/ColumnSelector.tsx
@@ -1,5 +1,13 @@
-import { autoUpdate, size, useClick, useDismiss, useFloating, useInteractions } from "@floating-ui/react";
-import { createElement, ReactElement, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import {
+    FloatingFocusManager,
+    autoUpdate,
+    size,
+    useClick,
+    useDismiss,
+    useFloating,
+    useInteractions
+} from "@floating-ui/react";
+import { createElement, ReactElement, useEffect, useMemo, useState } from "react";
 import { flushSync } from "react-dom";
 import { GridColumn } from "../typings/GridColumn";
 import { FaEye } from "./icons/FaEye";
@@ -15,7 +23,6 @@ export function ColumnSelector(props: ColumnSelectorProps): ReactElement {
     const { visibleLength } = props;
     const [show, setShow] = useState(false);
     const [maxHeight, setMaxHeight] = useState<number>(0);
-    const buttonRef = useRef<HTMLButtonElement>(null);
     const { refs, floatingStyles, context, update } = useFloating({
         open: show,
         placement: "bottom-end",
@@ -49,20 +56,6 @@ export function ColumnSelector(props: ColumnSelectorProps): ReactElement {
     const firstHidableColumnIndex = useMemo(() => props.columns.findIndex(c => c.canHide), [props.columns]);
     const lastHidableColumnIndex = useMemo(() => props.columns.map(c => c.canHide).lastIndexOf(true), [props.columns]);
 
-    useLayoutEffect(() => {
-        if (show) {
-            // Focus the first visible column
-            setTimeout(() => {
-                (refs.floating?.current?.querySelector("li") as HTMLElement)?.focus();
-            }, 10);
-        } else {
-            // focus back to the button when closing
-            setTimeout(() => {
-                (refs.reference?.current as HTMLElement)?.focus();
-            }, 10);
-        }
-    }, [show]);
-
     const optionsComponent = (
         <ul
             ref={refs.setFloating}
@@ -102,7 +95,6 @@ export function ColumnSelector(props: ColumnSelectorProps): ReactElement {
                             ) {
                                 e.preventDefault();
                                 setShow(false);
-                                buttonRef.current?.focus();
                             }
                         }}
                         role="menuitem"
@@ -147,7 +139,11 @@ export function ColumnSelector(props: ColumnSelectorProps): ReactElement {
                     <FaEye />
                 </button>
             </div>
-            {show && optionsComponent}
+            {show && (
+                <FloatingFocusManager context={context} modal={false}>
+                    {optionsComponent}
+                </FloatingFocusManager>
+            )}
         </div>
     );
 }