fix(AnalyticalTable): fix vertical scrollbar styles for Chrome and Firefox

Author: Lukas742

packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css

@@ -607,3 +607,17 @@
   box-sizing: border-box;
   border-inline-end: var(--_ui5wcr-AnalyticalTable-OuterBorderInline);
 }
+
+/* ==========================================================================
+   Firefox scrollbar styles
+   ========================================================================== */
+
+.firefoxCell {
+  &:last-child {
+    padding-inline-end: 18px;
+  }
+}
+
+.firefoxNativeScrollbar {
+  scrollbar-width: inherit;
+}

packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBodyContainer.tsx

@@ -1,4 +1,5 @@
 import { enrichEventWithDetails } from '@ui5/webcomponents-react-base';
+import { clsx } from 'clsx';
 import type { MutableRefObject } from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import type { AnalyticalTablePropTypes, TableInstance } from '../types/index.js';
@@ -20,6 +21,7 @@ interface VirtualTableBodyContainerProps {
   rowCollapsedFlag?: boolean;
   dispatch: (e: { type: string; payload?: any }) => void;
   isGrouped: boolean;
+  isFirefox: boolean;
 }
 
 export const VirtualTableBodyContainer = (props: VirtualTableBodyContainerProps) => {
@@ -39,6 +41,7 @@ export const VirtualTableBodyContainer = (props: VirtualTableBodyContainerProps)
     popInRowHeight,
     rowCollapsedFlag,
     isGrouped,
+    isFirefox,
     dispatch,
   } = props;
   const [isMounted, setIsMounted] = useState(false);
@@ -114,7 +117,7 @@ export const VirtualTableBodyContainer = (props: VirtualTableBodyContainerProps)
 
   return (
     <div
-      className={classes.tbody}
+      className={clsx(classes.tbody, isFirefox && classes.firefoxNativeScrollbar)}
       ref={parentRef}
       onScroll={onScroll}
       style={{

packages/main/src/components/AnalyticalTable/hooks/useStyling.ts

@@ -1,3 +1,4 @@
+import { clsx } from 'clsx';
 import type { CSSProperties } from 'react';
 import { AnalyticalTableSelectionBehavior } from '../../../enums/AnalyticalTableSelectionBehavior.js';
 import { AnalyticalTableSelectionMode } from '../../../enums/AnalyticalTableSelectionMode.js';
@@ -85,14 +86,10 @@ const getRowProps = (
 };
 
 const getCellProps = (cellProps, { cell: { column }, instance }) => {
-  const { classes } = instance.webComponentsReactProperties;
+  const { webComponentsReactProperties, state } = instance;
+  const { classes, isFirefox } = webComponentsReactProperties;
   const style: CSSProperties = { width: `${column.totalWidth}px`, ...resolveCellAlignment(column) };
 
-  let className = classes.tableCell;
-  if (column.className) {
-    className += ` ${column.className}`;
-  }
-
   if (
     column.id === '__ui5wcr__internal_highlight_column' ||
     column.id === '__ui5wcr__internal_selection_column' ||
@@ -104,7 +101,12 @@ const getCellProps = (cellProps, { cell: { column }, instance }) => {
   return [
     cellProps,
     {
-      className,
+      className: clsx(
+        cellProps.className,
+        classes.tableCell,
+        column.className,
+        isFirefox && state.isScrollable && classes.firefoxCell,
+      ),
       style,
       tabIndex: -1,
     },

packages/main/src/components/AnalyticalTable/hooks/useSyncScroll.ts

@@ -1,15 +1,22 @@
 import type { MutableRefObject } from 'react';
 import { useEffect, useRef, useState } from 'react';
 
-export function useSyncScroll(refContent: MutableRefObject<HTMLElement>, refScrollbar: MutableRefObject<HTMLElement>) {
-  const ticking = useRef(false);
+export function useSyncScroll(
+  refContent: MutableRefObject<HTMLElement>,
+  refScrollbar: MutableRefObject<HTMLElement>,
+  disabled = false,
+) {
   const isProgrammatic = useRef(false);
   const [isMounted, setIsMounted] = useState(false);
 
   useEffect(() => {
     const content = refContent.current;
     const scrollbar = refScrollbar.current;
 
+    if (disabled) {
+      return;
+    }
+
     if (!content || !scrollbar || !isMounted) {
       setIsMounted(true);
       return;
@@ -18,24 +25,15 @@ export function useSyncScroll(refContent: MutableRefObject<HTMLElement>, refScro
     scrollbar.scrollTop = content.scrollTop;
 
     const sync = (source: 'content' | 'scrollbar') => {
-      if (ticking.current) {
-        return;
+      const sourceEl = source === 'content' ? content : scrollbar;
+      const targetEl = source === 'content' ? scrollbar : content;
+
+      if (!isProgrammatic.current && targetEl.scrollTop !== sourceEl.scrollTop) {
+        isProgrammatic.current = true;
+        targetEl.scrollTop = sourceEl.scrollTop;
+        // Clear the flag on next frame
+        requestAnimationFrame(() => (isProgrammatic.current = false));
       }
-      ticking.current = true;
-
-      requestAnimationFrame(() => {
-        const sourceEl = source === 'content' ? content : scrollbar;
-        const targetEl = source === 'content' ? scrollbar : content;
-
-        if (!isProgrammatic.current && targetEl.scrollTop !== sourceEl.scrollTop) {
-          isProgrammatic.current = true;
-          targetEl.scrollTop = sourceEl.scrollTop;
-          // Clear the flag on next frame
-          requestAnimationFrame(() => (isProgrammatic.current = false));
-        }
-
-        ticking.current = false;
-      });
     };
 
     const onScrollContent = () => sync('content');

packages/main/src/components/AnalyticalTable/index.tsx

@@ -10,6 +10,7 @@ import {
   useStylesheet,
   useSyncRef,
 } from '@ui5/webcomponents-react-base';
+import { isFirefox as isFireFoxFn } from '@ui5/webcomponents-react-base/Device';
 import { clsx } from 'clsx';
 import type { CSSProperties, MutableRefObject } from 'react';
 import { forwardRef, useCallback, useEffect, useId, useMemo, useRef } from 'react';
@@ -99,6 +100,8 @@ import {
 } from './util/index.js';
 import { VerticalResizer } from './VerticalResizer.js';
 
+const isFirefox = isFireFoxFn();
+
 // When a sorted column is removed from the visible columns array (e.g. when "popped-in"), it doesn't clean up the sorted columns leading to an undefined `sortType`.
 const sortTypesFallback = {
   undefined: () => undefined,
@@ -256,6 +259,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
         classes: classNames,
         fontsReady,
         highlightField,
+        isFirefox,
         isTreeTable,
         loading,
         markNavigatedRow,
@@ -658,7 +662,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
     }
   }, [tableState.columnResizing, retainColumnWidth, tableState.tableColResized]);
 
-  useSyncScroll(parentRef, verticalScrollBarRef);
+  useSyncScroll(parentRef, verticalScrollBarRef, isFirefox);
 
   useEffect(() => {
     columnVirtualizer.measure();
@@ -844,6 +848,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
               handleExternalScroll={onTableScroll}
               visibleRows={internalVisibleRowCount}
               isGrouped={isGrouped}
+              isFirefox={isFirefox}
             >
               <VirtualTableBody
                 scrollContainerRef={scrollContainerRef}
@@ -871,7 +876,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
             </VirtualTableBodyContainer>
           )}
         </div>
-        {(additionalEmptyRowsCount || tableState.isScrollable) && (
+        {!isFirefox && (additionalEmptyRowsCount || tableState.isScrollable) && (
           <VerticalScrollbar
             tableBodyHeight={tableBodyHeight}
             internalRowHeight={internalHeaderRowHeight}

packages/main/src/components/AnalyticalTable/scrollbars/VerticalScrollbar.tsx

@@ -1,6 +1,8 @@
+import { isChrome as isChromeFn } from '@ui5/webcomponents-react-base/Device';
+import { useSyncRef } from '@ui5/webcomponents-react-base/internal/hooks';
 import { clsx } from 'clsx';
 import type { MutableRefObject } from 'react';
-import { forwardRef } from 'react';
+import { forwardRef, useEffect, useRef } from 'react';
 import { FlexBoxDirection } from '../../../enums/FlexBoxDirection.js';
 import { FlexBox } from '../../FlexBox/index.js';
 import type { ClassNames } from '../types/index.js';
@@ -13,10 +15,35 @@ interface VerticalScrollbarProps {
   classNames: ClassNames;
 }
 
+const isChrome = isChromeFn();
+
 export const VerticalScrollbar = forwardRef<HTMLDivElement, VerticalScrollbarProps>((props, ref) => {
   const { internalRowHeight, tableRef, tableBodyHeight, scrollContainerRef, classNames } = props;
   const hasHorizontalScrollbar = tableRef?.current?.offsetWidth !== tableRef?.current?.scrollWidth;
   const horizontalScrollbarSectionStyles = clsx(hasHorizontalScrollbar && classNames.bottomSection);
+  const [componentRef, scrollbarRef] = useSyncRef<HTMLDivElement>(ref);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  // Force style recalculation to fix Chrome scrollbar-color bug (track height not updating correctly)
+  useEffect(() => {
+    if (!isChrome) {
+      return;
+    }
+
+    if (scrollbarRef.current && contentRef.current) {
+      const scrollbarElement = scrollbarRef.current;
+
+      const forceScrollbarUpdate = () => {
+        const originalHeight = scrollbarElement.style.height;
+        scrollbarElement.style.height = `${tableBodyHeight + 1}px`;
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+        scrollbarElement.offsetHeight; // Force reflow
+        scrollbarElement.style.height = originalHeight ?? `${tableBodyHeight}px`;
+      };
+
+      requestAnimationFrame(forceScrollbarUpdate);
+    }
+  }, [tableBodyHeight, scrollContainerRef.current?.scrollHeight, scrollbarRef]);
 
   return (
     <FlexBox
@@ -31,7 +58,7 @@ export const VerticalScrollbar = forwardRef<HTMLDivElement, VerticalScrollbarPro
         className={classNames.headerSection}
       />
       <div
-        ref={ref}
+        ref={componentRef}
         style={{
           height: tableRef.current ? `${tableBodyHeight}px` : '0',
         }}
@@ -40,10 +67,13 @@ export const VerticalScrollbar = forwardRef<HTMLDivElement, VerticalScrollbarPro
         tabIndex={-1}
       >
         <div
-          className={classNames.verticalScroller}
-          style={{
-            height: `${scrollContainerRef.current?.scrollHeight}px`,
+          ref={(node) => {
+            contentRef.current = node;
+            if (node && scrollContainerRef.current?.scrollHeight) {
+              node.style.height = `${scrollContainerRef.current?.scrollHeight}px`;
+            }
           }}
+          className={classNames.verticalScroller}
         />
       </div>
       <div className={horizontalScrollbarSectionStyles} />