add support for autoFocus and tabIndex in props.domProps

Author: radubrehar

examples/src/pages/tests/table/props/active-row-index/default.page.tsx

@@ -55,6 +55,7 @@ export default function KeyboardNavigationForRows() {
         defaultActiveRowIndex={99}
         keyboardNavigation="row"
         domProps={{
+          autoFocus: true,
           style: {
             height: 800,
           },

source/src/components/HeadlessTable/index.tsx

@@ -165,6 +165,8 @@ export function HeadlessTable(
     ...domProps
   } = props;
 
+  const { autoFocus } = domProps;
+
   const domRef = useRef<HTMLDivElement>(null);
 
   const [scrollSize, setTotalScrollSize] = useState({
@@ -183,6 +185,9 @@ export function HeadlessTable(
     if (!node) {
       return;
     }
+    if (autoFocus && document.activeElement !== node) {
+      node.focus();
+    }
     const onResize = () => {
       // it's not enough to read the size from onResize
       // since that doesn't account for scrollbar presence and size

source/src/components/InfiniteTable/index.tsx

@@ -173,6 +173,7 @@ function InfiniteTableBody<T>() {
     activeCellIndex,
     rowDetailRenderer,
     showHoverRows,
+    domProps,
   } = componentState;
 
   const LoadMaskCmp = components?.LoadMask ?? LoadMask;
@@ -243,11 +244,14 @@ function InfiniteTableBody<T>() {
     computed,
   });
 
+  const { autoFocus, tabIndex } = domProps ?? {};
+
   return (
     <InfiniteTableBodyContainer onContextMenu={onContextMenu}>
       <HeadlessTable
         debugId={debugId}
-        tabIndex={0}
+        tabIndex={tabIndex ?? 0}
+        autoFocus={autoFocus ?? undefined}
         activeRowIndex={
           componentState.ready && keyboardNavigation === 'row'
             ? activeRowIndex
@@ -336,7 +340,16 @@ export const InfiniteTableComponent = React.memo(
 
     const licenseValid = useLicense(licenseKey);
 
-    const domProps = useDOMProps<T>(componentState.domProps);
+    const {
+      // remove autoFocus and tabIndex from the domProps
+      // that will be spread on the root DOM element
+      // as they are meant for the scroller element
+      autoFocus: _,
+      tabIndex: __,
+      ...initialDOMProps
+    } = componentState.domProps ?? {};
+
+    const domProps = useDOMProps<T>(initialDOMProps);
 
     React.useEffect(() => {
       brain.setScrollStopDelay(scrollStopDelay);

source/src/components/VirtualScrollContainer/index.tsx

@@ -22,6 +22,7 @@ export interface VirtualScrollContainerProps {
 
   scrollable?: Scrollable;
   tabIndex?: number;
+  autoFocus?: boolean;
 
   onContainerScroll?: (scrollPos: {
     scrollTop: number;
@@ -42,6 +43,7 @@ export const VirtualScrollContainer = React.forwardRef(
       className,
       tabIndex,
       style,
+      autoFocus,
     } = props;
 
     const domRef = ref ?? useRef<HTMLDivElement | null>(null);
@@ -54,6 +56,7 @@ export const VirtualScrollContainer = React.forwardRef(
       <div
         ref={domRef}
         style={style}
+        autoFocus={autoFocus}
         tabIndex={tabIndex}
         className={join(
           className,