Scroll selected <LayerListItem/> into view

src/components/layers/LayerList.jsx

@@ -42,13 +42,17 @@ class LayerListContainer extends React.Component {
     onLayerSelect: () => {},
   }
 
-  state = {
+  constructor(props) {
+    super(props);
+    this.selectedItemRef = React.createRef();
+    this.state = {
       collapsedGroups: {},
       areAllGroupsExpanded: false,
       isOpen: {
         add: false,
       }
     }
+  }
 
   toggleModal(modalName) {
     this.setState({
@@ -161,6 +165,13 @@ class LayerListContainer extends React.Component {
     return propsChanged;
   }
 
+  componentDidUpdate () {
+    const selectedItemNode = this.selectedItemRef.current;
+    if (selectedItemNode && selectedItemNode.node) {
+      selectedItemNode.node.scrollIntoView();
+    }
+  }
+
   render() {
 
     const listItems = []
@@ -189,6 +200,11 @@ class LayerListContainer extends React.Component {
           );
         });
 
+        const additionalProps = {};
+        if (idx === this.props.selectedLayerIndex) {
+          additionalProps.ref = this.selectedItemRef;
+        }
+
         const listItem = <LayerListItem
           className={classnames({
             'maputnik-layer-list-item-collapsed': layers.length > 1 && this.isCollapsed(groupPrefix, groupIdx) && idx !== this.props.selectedLayerIndex,
@@ -205,6 +221,7 @@ class LayerListContainer extends React.Component {
           onLayerDestroy={this.props.onLayerDestroy.bind(this)}
           onLayerCopy={this.props.onLayerCopy.bind(this)}
           onLayerVisibilityToggle={this.props.onLayerVisibilityToggle.bind(this)}
+          {...additionalProps}
         />
         listItems.push(listItem)
         idx += 1