Skip to content

Commit cb6286e

Browse files
douglasmuraokadavimacedo
authored andcommitted
fix(Database Browser): Table not scrolling when using arrow keys (#1239)
1 parent 7260816 commit cb6286e

File tree

1 file changed

+23
-1
lines changed

1 file changed

+23
-1
lines changed

src/components/BrowserCell/BrowserCell.react.js

+23-1
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,32 @@ import { dateStringUTC } from 'lib/DateUtils';
99
import getFileName from 'lib/getFileName';
1010
import Parse from 'parse';
1111
import Pill from 'components/Pill/Pill.react';
12-
import React from 'react';
12+
import React, { useEffect, useRef }
13+
from 'react';
1314
import styles from 'components/BrowserCell/BrowserCell.scss';
1415
import { unselectable } from 'stylesheets/base.scss';
1516

1617
let BrowserCell = ({ type, value, hidden, width, current, onSelect, onEditChange, setRelation, onPointerClick }) => {
18+
const cellRef = current ? useRef() : null;
19+
if (current) {
20+
useEffect(() => {
21+
const node = cellRef.current;
22+
const { left, right, bottom, top } = node.getBoundingClientRect();
23+
24+
// Takes into consideration Sidebar width when over 980px wide.
25+
const leftBoundary = window.innerWidth > 980 ? 300 : 0;
26+
27+
// BrowserToolbar + DataBrowserHeader height
28+
const topBoundary = 126;
29+
30+
if (left < leftBoundary || right > window.innerWidth) {
31+
node.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
32+
} else if (top < topBoundary || bottom > window.innerHeight) {
33+
node.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
34+
}
35+
});
36+
}
37+
1738
let content = value;
1839
let classes = [styles.cell, unselectable];
1940
if (hidden) {
@@ -98,6 +119,7 @@ let BrowserCell = ({ type, value, hidden, width, current, onSelect, onEditChange
98119
}
99120
return (
100121
<span
122+
ref={cellRef}
101123
className={classes.join(' ')}
102124
style={{ width }}
103125
onClick={onSelect}

0 commit comments

Comments
 (0)