diff --git a/src/components/SideMenu/MenuItem.tsx b/src/components/SideMenu/MenuItem.tsx index 2a219dfc6f..8b418aad90 100644 --- a/src/components/SideMenu/MenuItem.tsx +++ b/src/components/SideMenu/MenuItem.tsx @@ -1,3 +1,4 @@ +// import { observe } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; @@ -15,7 +16,7 @@ export interface MenuItemProps { @observer export class MenuItem extends React.Component { - ref: Element | null; + ref = React.createRef(); activate = (evt: React.MouseEvent) => { this.props.onActivate!(this.props.item); @@ -31,28 +32,19 @@ export class MenuItem extends React.Component { } scrollIntoViewIfActive() { - if (this.props.item.active && this.ref) { - this.ref.scrollIntoViewIfNeeded(); + if (this.props.item.active && this.ref.current) { + this.ref.current.scrollIntoViewIfNeeded(); } } - saveRef = ref => { - this.ref = ref; - }; - render() { const { item, withoutChildren } = this.props; return ( - + {item.type === 'operation' ? ( ) : ( - + {item.name} {this.props.children} @@ -81,10 +73,23 @@ export interface OperationMenuItemContentProps { @observer export class OperationMenuItemContent extends React.Component { + ref = React.createRef(); + + componentDidUpdate() { + if (this.props.item.active && this.ref.current) { + this.ref.current.scrollIntoViewIfNeeded(); + } + } + render() { const { item } = this.props; return ( - + {shortenHTTPVerb(item.httpVerb)} {item.name}