diff --git a/src/renderer/components/hotbar/hotbar-remove-command.tsx b/src/renderer/components/hotbar/hotbar-remove-command.tsx
index 185ff65497..1dff3acf0c 100644
--- a/src/renderer/components/hotbar/hotbar-remove-command.tsx
+++ b/src/renderer/components/hotbar/hotbar-remove-command.tsx
@@ -1,13 +1,18 @@
 import React from "react";
 import { observer } from "mobx-react";
 import { Select } from "../select";
-import { computed } from "mobx";
+import { computed, makeObservable } from "mobx";
 import { HotbarStore } from "../../../common/hotbar-store";
 import { CommandOverlay } from "../command-palette";
 import { ConfirmDialog } from "../confirm-dialog";
 
 @observer
 export class HotbarRemoveCommand extends React.Component {
+  constructor(props: object) {
+    super(props);
+    makeObservable(this);
+  }
+
   @computed get options() {
     return HotbarStore.getInstance().hotbars.map((hotbar) => {
       return { value: hotbar.id, label: hotbar.name };
@@ -51,7 +56,7 @@ export class HotbarRemoveCommand extends React.Component {
         options={this.options}
         autoFocus={true}
         escapeClearsValue={false}
-        placeholder="Remove hotbar" />
+        placeholder="Remove hotbar"/>
     );
   }
 }
diff --git a/src/renderer/components/hotbar/hotbar-switch-command.tsx b/src/renderer/components/hotbar/hotbar-switch-command.tsx
index 991c5927ca..2f3d791106 100644
--- a/src/renderer/components/hotbar/hotbar-switch-command.tsx
+++ b/src/renderer/components/hotbar/hotbar-switch-command.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { observer } from "mobx-react";
 import { Select } from "../select";
-import { computed } from "mobx";
+import { computed, makeObservable } from "mobx";
 import { HotbarStore } from "../../../common/hotbar-store";
 import { CommandOverlay } from "../command-palette";
 import { HotbarAddCommand } from "./hotbar-add-command";
@@ -12,6 +12,11 @@ export class HotbarSwitchCommand extends React.Component {
   private static addActionId = "__add__";
   private static removeActionId = "__remove__";
 
+  constructor(props: object) {
+    super(props);
+    makeObservable(this);
+  }
+
   @computed get options() {
     const hotbarStore = HotbarStore.getInstance();
     const options = hotbarStore.hotbars.map((hotbar) => {
@@ -28,13 +33,13 @@ export class HotbarSwitchCommand extends React.Component {
   }
 
   onChange(idOrAction: string): void {
-    switch(idOrAction) {
+    switch (idOrAction) {
       case HotbarSwitchCommand.addActionId:
-        CommandOverlay.open(<HotbarAddCommand />);
+        CommandOverlay.open(<HotbarAddCommand/>);
 
         return;
       case HotbarSwitchCommand.removeActionId:
-        CommandOverlay.open(<HotbarRemoveCommand />);
+        CommandOverlay.open(<HotbarRemoveCommand/>);
 
         return;
       default:
@@ -52,7 +57,7 @@ export class HotbarSwitchCommand extends React.Component {
         options={this.options}
         autoFocus={true}
         escapeClearsValue={false}
-        placeholder="Switch to hotbar" />
+        placeholder="Switch to hotbar"/>
     );
   }
 }
diff --git a/src/renderer/components/input/search-input-url.tsx b/src/renderer/components/input/search-input-url.tsx
index efc4d9345b..b9bd88a7fc 100644
--- a/src/renderer/components/input/search-input-url.tsx
+++ b/src/renderer/components/input/search-input-url.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import debounce from "lodash/debounce";
-import { autorun, observable, makeObservable } from "mobx";
+import { autorun, makeObservable, observable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { InputProps } from "./input";
 import { SearchInput } from "./search-input";
diff --git a/src/renderer/components/input/search-input.tsx b/src/renderer/components/input/search-input.tsx
index 4c2615eb54..144cf10ada 100644
--- a/src/renderer/components/input/search-input.tsx
+++ b/src/renderer/components/input/search-input.tsx
@@ -1,7 +1,6 @@
 import "./search-input.scss";
 
 import React, { createRef } from "react";
-import { makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { autobind, cssNames } from "../../utils";
 import { Icon } from "../icon";
@@ -29,11 +28,6 @@ export class SearchInput extends React.Component<Props> {
 
   private inputRef = createRef<Input>();
 
-  constructor(props: Props) {
-    super(props);
-    makeObservable(this);
-  }
-
   componentDidMount() {
     if (!this.props.bindGlobalFocusHotkey) return;
     window.addEventListener("keydown", this.onGlobalKey);