@@ -296,6 +296,8 @@ function DataGrid<R, SR, K extends Key>(
296296 const [ isDragging , setDragging ] = useState ( false ) ;
297297 const [ draggedOverRowIdx , setOverRowIdx ] = useState < number | undefined > ( undefined ) ;
298298 const [ scrollToPosition , setScrollToPosition ] = useState < PartialPosition | null > ( null ) ;
299+ const [ shouldFocusCell , setShouldFocusCell ] = useState ( false ) ;
300+ const [ previousRowIdx , setPreviousRowIdx ] = useState ( - 1 ) ;
299301
300302 const getColumnWidth = useCallback (
301303 ( column : CalculatedColumn < R , SR > ) => {
@@ -338,15 +340,13 @@ function DataGrid<R, SR, K extends Key>(
338340 const [ selectedPosition , setSelectedPosition ] = useState (
339341 ( ) : SelectCellState | EditCellState < R > => ( { idx : - 1 , rowIdx : minRowIdx - 1 , mode : 'SELECT' } )
340342 ) ;
343+ const [ prevSelectedPosition , setPrevSelectedPosition ] = useState ( selectedPosition ) ;
341344
342345 /**
343346 * refs
344347 */
345- const prevSelectedPosition = useRef ( selectedPosition ) ;
346348 const latestDraggedOverRowIdx = useRef ( draggedOverRowIdx ) ;
347- const lastSelectedRowIdx = useRef ( - 1 ) ;
348349 const focusSinkRef = useRef < HTMLDivElement > ( null ) ;
349- const shouldFocusCellRef = useRef ( false ) ;
350350
351351 /**
352352 * computed values
@@ -458,31 +458,50 @@ function DataGrid<R, SR, K extends Key>(
458458 selectCell ( { rowIdx : minRowIdx + rowIdx - 1 , idx } ) ;
459459 } ) ;
460460
461+ /**
462+ * callbacks
463+ */
464+ const setDraggedOverRowIdx = useCallback ( ( rowIdx ?: number ) => {
465+ setOverRowIdx ( rowIdx ) ;
466+ latestDraggedOverRowIdx . current = rowIdx ;
467+ } , [ ] ) ;
468+
469+ const focusCellOrCellContent = useCallback ( ( ) => {
470+ const cell = getCellToScroll ( gridRef . current ! ) ;
471+ if ( cell === null ) return ;
472+
473+ scrollIntoView ( cell ) ;
474+ // Focus cell content when available instead of the cell itself
475+ const elementToFocus = cell . querySelector < Element & HTMLOrSVGElement > ( '[tabindex="0"]' ) ?? cell ;
476+ elementToFocus . focus ( { preventScroll : true } ) ;
477+ } , [ gridRef ] ) ;
478+
461479 /**
462480 * effects
463481 */
464482 useLayoutEffect ( ( ) => {
465483 if (
466484 ! selectedCellIsWithinSelectionBounds ||
467- isSamePosition ( selectedPosition , prevSelectedPosition . current )
485+ isSamePosition ( selectedPosition , prevSelectedPosition )
468486 ) {
469- prevSelectedPosition . current = selectedPosition ;
487+ setPrevSelectedPosition ( selectedPosition ) ;
470488 return ;
471489 }
472490
473- prevSelectedPosition . current = selectedPosition ;
491+ setPrevSelectedPosition ( selectedPosition ) ;
474492
475- if ( selectedPosition . idx === - 1 ) {
476- focusSinkRef . current ! . focus ( { preventScroll : true } ) ;
493+ if ( focusSinkRef . current !== null && selectedPosition . idx === - 1 ) {
494+ focusSinkRef . current . focus ( { preventScroll : true } ) ;
477495 scrollIntoView ( focusSinkRef . current ) ;
478496 }
479- } ) ;
497+ } , [ selectedCellIsWithinSelectionBounds , selectedPosition , prevSelectedPosition ] ) ;
480498
481499 useLayoutEffect ( ( ) => {
482- if ( ! shouldFocusCellRef . current ) return ;
483- shouldFocusCellRef . current = false ;
484- focusCellOrCellContent ( ) ;
485- } ) ;
500+ if ( shouldFocusCell ) {
501+ setShouldFocusCell ( false ) ;
502+ focusCellOrCellContent ( ) ;
503+ }
504+ } , [ shouldFocusCell , focusCellOrCellContent ] ) ;
486505
487506 useImperativeHandle ( ref , ( ) => ( {
488507 element : gridRef . current ,
@@ -499,14 +518,6 @@ function DataGrid<R, SR, K extends Key>(
499518 selectCell
500519 } ) ) ;
501520
502- /**
503- * callbacks
504- */
505- const setDraggedOverRowIdx = useCallback ( ( rowIdx ?: number ) => {
506- setOverRowIdx ( rowIdx ) ;
507- latestDraggedOverRowIdx . current = rowIdx ;
508- } , [ ] ) ;
509-
510521 /**
511522 * event handlers
512523 */
@@ -536,9 +547,8 @@ function DataGrid<R, SR, K extends Key>(
536547 if ( isRowSelectionDisabled ?.( row ) === true ) return ;
537548 const newSelectedRows = new Set ( selectedRows ) ;
538549 const rowKey = rowKeyGetter ( row ) ;
539- const previousRowIdx = lastSelectedRowIdx . current ;
540550 const rowIdx = rows . indexOf ( row ) ;
541- lastSelectedRowIdx . current = rowIdx ;
551+ setPreviousRowIdx ( rowIdx ) ;
542552
543553 if ( checked ) {
544554 newSelectedRows . add ( rowKey ) ;
@@ -758,7 +768,7 @@ function DataGrid<R, SR, K extends Key>(
758768 // Avoid re-renders if the selected cell state is the same
759769 scrollIntoView ( getCellToScroll ( gridRef . current ! ) ) ;
760770 } else {
761- shouldFocusCellRef . current = true ;
771+ setShouldFocusCell ( true ) ;
762772 setSelectedPosition ( { ...position , mode : 'SELECT' } ) ;
763773 }
764774
@@ -870,16 +880,6 @@ function DataGrid<R, SR, K extends Key>(
870880 return isDraggedOver ? selectedPosition . idx : undefined ;
871881 }
872882
873- function focusCellOrCellContent ( ) {
874- const cell = getCellToScroll ( gridRef . current ! ) ;
875- if ( cell === null ) return ;
876-
877- scrollIntoView ( cell ) ;
878- // Focus cell content when available instead of the cell itself
879- const elementToFocus = cell . querySelector < Element & HTMLOrSVGElement > ( '[tabindex="0"]' ) ?? cell ;
880- elementToFocus . focus ( { preventScroll : true } ) ;
881- }
882-
883883 function renderDragHandle ( ) {
884884 if (
885885 onFill == null ||
@@ -925,7 +925,7 @@ function DataGrid<R, SR, K extends Key>(
925925 const colSpan = getColSpan ( column , lastFrozenColumnIndex , { type : 'ROW' , row } ) ;
926926
927927 const closeEditor = ( shouldFocusCell : boolean ) => {
928- shouldFocusCellRef . current = shouldFocusCell ;
928+ setShouldFocusCell ( shouldFocusCell ) ;
929929 setSelectedPosition ( ( { idx, rowIdx } ) => ( { idx, rowIdx, mode : 'SELECT' } ) ) ;
930930 } ;
931931
@@ -1061,6 +1061,7 @@ function DataGrid<R, SR, K extends Key>(
10611061 // Reset the positions if the current values are no longer valid. This can happen if a column or row is removed
10621062 if ( selectedPosition . idx > maxColIdx || selectedPosition . rowIdx > maxRowIdx ) {
10631063 setSelectedPosition ( { idx : - 1 , rowIdx : minRowIdx - 1 , mode : 'SELECT' } ) ;
1064+ // eslint-disable-next-line react-compiler/react-compiler
10641065 setDraggedOverRowIdx ( undefined ) ;
10651066 }
10661067
@@ -1182,6 +1183,7 @@ function DataGrid<R, SR, K extends Key>(
11821183 ) ;
11831184 } ) }
11841185 < RowSelectionChangeProvider value = { selectRowLatest } >
1186+ { /* eslint-disable-next-line react-compiler/react-compiler */ }
11851187 { getViewportRows ( ) }
11861188 </ RowSelectionChangeProvider >
11871189 { bottomSummaryRows ?. map ( ( row , rowIdx ) => {
@@ -1245,7 +1247,7 @@ function DataGrid<R, SR, K extends Key>(
12451247 < ScrollToCell
12461248 scrollToPosition = { scrollToPosition }
12471249 setScrollToCellPosition = { setScrollToPosition }
1248- gridElement = { gridRef . current ! }
1250+ gridRef = { gridRef }
12491251 />
12501252 ) }
12511253 </ div >
0 commit comments