[data grid] Fix focus visible style on scrollbar (mui#12402)

thomasmoon · Sep 6, 2024 · f5d7f82 · f5d7f82
1 parent 8320a44
commit f5d7f82
Showing 1 changed file with 4 additions and 0 deletions.
diff --git a/packages/x-data-grid/src/components/virtualization/GridVirtualScrollbar.tsx b/packages/x-data-grid/src/components/virtualization/GridVirtualScrollbar.tsx
@@ -47,6 +47,8 @@ const ScrollbarVertical = styled(Scrollbar)({
     'calc(var(--DataGrid-hasScrollY) * (100% - var(--DataGrid-topContainerHeight) - var(--DataGrid-bottomContainerHeight) - var(--DataGrid-hasScrollX) * var(--DataGrid-scrollbarSize)))',
   overflowY: 'auto',
   overflowX: 'hidden',
+  // Disable focus-visible style, it's a scrollbar.
+  outline: 0,
   '& > div': {
     width: 'var(--size)',
   },
@@ -59,6 +61,8 @@ const ScrollbarHorizontal = styled(Scrollbar)({
   height: 'var(--size)',
   overflowY: 'hidden',
   overflowX: 'auto',
+  // Disable focus-visible style, it's a scrollbar.
+  outline: 0,
   '& > div': {
     height: 'var(--size)',
   },