Changed select-on-click to select-on-mouse-down and fixed a scrollIntoView problem
Brian Vaughn committed
Feb 27, 2019 at 13:11 UTC
1e4434ecc46fd7e5ef202766cc3f39b77eb14ba1
2 files changed
+7
-4
src/devtools/views/Element.css
-1
@@ -2,7 +2,6 @@
2
.SelectedElement {
3
width: 100%;
4
border-radius: 0.25em;
5
- cursor: pointer;
5
position: relative;
6
white-space: nowrap;
7
line-height: var(--line-height-data);
src/devtools/views/Element.js
+7
-3
@@ -46,14 +46,18 @@ export default function ElementView({ index, style }: Props) {
46
useEffect(() => {
47
if (isSelected) {
48
if (ref.current !== null) {
49
- ref.current.scrollIntoView();
49
+ ref.current.scrollIntoView({
50
+ behavior: 'auto',
51
+ block: 'nearest',
52
+ inline: 'nearest',
53
+ });
54
}
55
}
56
}, [isSelected]);
57
58
// TODO Add click and key handlers for toggling element open/close state.
59
56
- const handleClick = useCallback(
60
+ const handleMouseDown = useCallback(
61
({ metaKey }) => {
62
if (id !== null) {
63
selectElementByID(metaKey ? null : id);
@@ -80,7 +84,7 @@ export default function ElementView({ index, style }: Props) {
84
return (
85
<div
86
className={isSelected ? styles.SelectedElement : styles.Element}
83
- onClick={handleClick}
87
+ onMouseDown={handleMouseDown}
88
onDoubleClick={handleDoubleClick}
89
style={{
90
...style, // "style" comes from react-window