From d6c97b48d3c6fb3ce51e890190bb9664a7d219ce Mon Sep 17 00:00:00 2001
From: Scott Kyle <skyle@fb.com>
Date: Thu, 11 Jun 2020 00:13:37 -0700
Subject: [PATCH] Fix scrolling to inspected element

Summary:
When the `Scrollable` component was introduced, this functionality regressed because the `ref` was no longer set on the right component.

changelog: Fix scrolling to inspected element in Layout plugin

Reviewed By: mweststrate

Differential Revision: D21979475

fbshipit-source-id: f84d515cb1593a33d1ae0e93a01681b6e11aa623
---
 desktop/app/src/ui/components/Scrollable.tsx               | 2 +-
 .../app/src/ui/components/elements-inspector/elements.tsx  | 7 ++-----
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/desktop/app/src/ui/components/Scrollable.tsx b/desktop/app/src/ui/components/Scrollable.tsx
index 3a0248b5c..74adbadd7 100644
--- a/desktop/app/src/ui/components/Scrollable.tsx
+++ b/desktop/app/src/ui/components/Scrollable.tsx
@@ -13,7 +13,7 @@ import {BackgroundProperty} from 'csstype';
 
 type Props = {children: React.ReactNode; background?: BackgroundProperty<any>};
 
-const Scrollable: React.FC<Props> = styled('div')<Props>(({background}) => ({
+const Scrollable = styled.div<Props>(({background}) => ({
   width: '100%',
   height: '100%',
   overflow: 'auto',
diff --git a/desktop/app/src/ui/components/elements-inspector/elements.tsx b/desktop/app/src/ui/components/elements-inspector/elements.tsx
index a37a4856f..5d0ab2cf0 100644
--- a/desktop/app/src/ui/components/elements-inspector/elements.tsx
+++ b/desktop/app/src/ui/components/elements-inspector/elements.tsx
@@ -702,11 +702,8 @@ export class Elements extends PureComponent<ElementsProps, ElementsState> {
 
   render() {
     return (
-      <Scrollable>
-        <ElementsContainer
-          onKeyDown={this.onKeyDown}
-          tabIndex={0}
-          ref={this._outerRef}>
+      <Scrollable ref={this._outerRef}>
+        <ElementsContainer onKeyDown={this.onKeyDown} tabIndex={0}>
           {this.state.flatElements.map(this.buildRow)}
         </ElementsContainer>
       </Scrollable>