1 files changed, 17 insertions, 16 deletions

diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index d784a14b8..05634f376 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -2,7 +2,7 @@
 /* eslint-disable react/jsx-props-no-spreading */
 /* eslint-disable default-param-last */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, IReactionDisposer, makeObservable, observable } from 'mobx';
+import { action, computed, IReactionDisposer, makeObservable, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { DivHeight, DivWidth } from '../../ClientUtils';
@@ -12,7 +12,7 @@ import { ContextMenuItem, ContextMenuProps, OriginalMenuProps } from './ContextM
 import { ObservableReactComponent } from './ObservableReactComponent';
 
 @observer
-export class ContextMenu extends ObservableReactComponent<{}> {
+export class ContextMenu extends ObservableReactComponent<{ noexpand?: boolean }> {
     // eslint-disable-next-line no-use-before-define
     static Instance: ContextMenu;
 
@@ -39,7 +39,7 @@ export class ContextMenu extends ObservableReactComponent<{}> {
     @observable _mouseY: number = -1;
     @observable _shouldDisplay: boolean = false;
 
-    constructor(props: any) {
+    constructor(props: object) {
         super(props);
         makeObservable(this);
         ContextMenu.Instance = this;
@@ -151,21 +151,21 @@ export class ContextMenu extends ObservableReactComponent<{}> {
     @computed get filteredItems(): (OriginalMenuProps | string[])[] {
         const searchString = this._searchString.toLowerCase().split(' ');
         const matches = (descriptions: string[]) => searchString.every(s => descriptions.some(desc => desc.toLowerCase().includes(s)));
-        const flattenItems = (items: ContextMenuProps[], groupFunc: (groupName: any) => string[]) => {
+        const flattenItems = (items: ContextMenuProps[], groupFunc: (groupName: string) => string[]) => {
             let eles: (OriginalMenuProps | string[])[] = [];
 
             const leaves: OriginalMenuProps[] = [];
             items.forEach(item => {
                 const { description } = item;
                 const path = groupFunc(description);
-                if ('subitems' in item) {
+                if (item.subitems) {
                     const children = flattenItems(item.subitems, name => [...groupFunc(description), name]);
                     if (children.length || matches(path)) {
                         eles.push(path);
                         eles = eles.concat(children);
                     }
                 } else if (matches(path)) {
-                    leaves.push(item);
+                    leaves.push(item as OriginalMenuProps);
                 }
             });
 
@@ -182,7 +182,7 @@ export class ContextMenu extends ObservableReactComponent<{}> {
 
     @computed get menuItems() {
         if (!this._searchString) {
-            return this._items.map((item, ind) => <ContextMenuItem key={item.description + ind} {...item} noexpand={this.itemsNeedSearch ? true : (item as any).noexpand} closeMenu={this.closeMenu} />);
+            return this._items.map((item, ind) => <ContextMenuItem key={item.description + ind} {...item} noexpand={this.itemsNeedSearch ? true : item.noexpand} closeMenu={this.closeMenu} />);
         }
         return this.filteredItems.map((value, index) =>
             Array.isArray(value) ? (
@@ -201,7 +201,7 @@ export class ContextMenu extends ObservableReactComponent<{}> {
     }
 
     @computed get itemsNeedSearch() {
-        return this._showSearch ? 1 : this._items.reduce((p, mi) => p + ((mi as any).noexpand ? 1 : (mi as any).subitems?.length || 1), 0) > 15;
+        return this._showSearch ? 1 : this._items.reduce((p, mi) => p + (mi.noexpand ? 1 : mi.subitems?.length || 1), 0) > 15;
     }
 
     _searchRef = React.createRef<HTMLInputElement>(); // bcz: we shouldn't need this, since we set autoFocus on the <input> tag, but for some reason we do...
@@ -211,13 +211,15 @@ export class ContextMenu extends ObservableReactComponent<{}> {
         return (
             <div
                 className="contextMenu-cont"
-                ref={action((r: any) => {
-                    if (r) {
-                        this._width = DivWidth(r);
-                        this._height = DivHeight(r);
-                    }
-                    this._searchRef.current?.focus();
-                })}
+                ref={r =>
+                    runInAction(() => {
+                        if (r) {
+                            this._width = DivWidth(r);
+                            this._height = DivHeight(r);
+                        }
+                        this._searchRef.current?.focus();
+                    })
+                }
                 style={{
                     display: this._display ? '' : 'none',
                     left: this.pageX,
@@ -239,7 +241,6 @@ export class ContextMenu extends ObservableReactComponent<{}> {
                             value={this._searchString}
                             onKeyDown={this.onKeyDown}
                             onChange={this.onChange}
-                            // eslint-disable-next-line jsx-a11y/no-autofocus
                             autoFocus
                         />
                     </span>