diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1b24d650..2a6c9a9c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -26,6 +26,7 @@
 - Fix issue with missing bottom error panel
 - Fixed headers in left panes (Layers list and Layer editor) to remain visible when scrolling
 - Fix error when using a source from localhost
+- Fix an issue with scrolling when using the code editor
 - _...Add new stuff here..._
 
 ## 3.0.0
diff --git a/cypress/e2e/modals.cy.ts b/cypress/e2e/modals.cy.ts
index 4007fdad..96364fac 100644
--- a/cypress/e2e/modals.cy.ts
+++ b/cypress/e2e/modals.cy.ts
@@ -178,11 +178,11 @@ describe("modals", () => {
     });
 
     it("sprite object", () => {
-      when.setTextInJsonEditor(JSON.stringify([{id: "1", url: "2"}]));
+      when.setTextInJsonEditor(JSON.stringify([{ id: "1", url: "2" }]));
 
       when.click("modal:settings.name");
       then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        sprite: [{ id: "1", url: "2"}],
+        sprite: [{ id: "1", url: "2" }],
       });
     });
 
@@ -342,8 +342,8 @@ describe("modals", () => {
     });
 
     it("add variable", () => {
-      when.click("global-state-add-variable");
       when.wait(100);
+      when.click("global-state-add-variable");
       then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
         state: { key1: { default: "value" } },
       });
@@ -373,6 +373,7 @@ describe("modals", () => {
 
     it("edit variable key", () => {
       when.click("global-state-add-variable");
+      when.wait(100);
       when.setValue("global-state-variable-key:0", "mykey");
       when.typeKeys("{enter}");
       when.wait(100);
@@ -383,6 +384,7 @@ describe("modals", () => {
 
     it("edit variable value", () => {
       when.click("global-state-add-variable");
+      when.wait(100);
       when.setValue("global-state-variable-value:0", "myvalue");
       when.typeKeys("{enter}");
       when.wait(100);
diff --git a/src/components/CodeEditor.tsx b/src/components/CodeEditor.tsx
index 7b2bd033..bcd8d22d 100644
--- a/src/components/CodeEditor.tsx
+++ b/src/components/CodeEditor.tsx
@@ -19,6 +19,7 @@ const CodeEditorInternal: React.FC<CodeEditorProps> = (props) => {
       value={props.value}
       onChange={props.onChange}
       className={"maputnik-code-editor"}
+      withScroll={true}
     />;
   </>;
 };
diff --git a/src/components/InputJson.tsx b/src/components/InputJson.tsx
index 04b782cd..665281e7 100644
--- a/src/components/InputJson.tsx
+++ b/src/components/InputJson.tsx
@@ -7,6 +7,7 @@ import stringifyPretty from "json-stringify-pretty-compact";
 
 import {createEditor} from "../libs/codemirror-editor-factory";
 import type { StylePropertySpecification } from "maplibre-gl";
+import type { TransactionSpec } from "@codemirror/state";
 
 export type InputJsonProps = {
   value: object
@@ -16,6 +17,11 @@ export type InputJsonProps = {
   onBlur?(...args: unknown[]): unknown
   lintType: "layer" | "style" | "expression" | "json"
   spec?: StylePropertySpecification | undefined
+  /**
+   * When setting this and using search and replace, the editor will scroll to the selected text
+   * Use this only when the editor is the only element in the page.
+   */
+  withScroll?: boolean
 };
 type InputJsonInternalProps = InputJsonProps & WithTranslation;
 
@@ -28,6 +34,7 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
   static defaultProps = {
     onFocus: () => {},
     onBlur: () => {},
+    withScroll: false
   };
   _view: EditorView | undefined;
   _el: HTMLDivElement | null = null;
@@ -74,16 +81,18 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
   componentDidUpdate(prevProps: InputJsonProps) {
     if (!this.state.isEditing && prevProps.value !== this.props.value) {
       this._cancelNextChange = true;
-      const currentSelection = this._view!.state.selection;
-      this._view!.dispatch({
+      const transactionSpec: TransactionSpec = {
         changes: {
           from: 0,
           to: this._view!.state.doc.length,
           insert: this.getPrettyJson(this.props.value)
-        },
-        selection: currentSelection,
-        scrollIntoView: true
-      });
+        }
+      };
+      if (this.props.withScroll) {
+        transactionSpec.selection = this._view!.state.selection;
+        transactionSpec.scrollIntoView = true;
+      }
+      this._view!.dispatch(transactionSpec);
     }
   }