From 97467c57bf89bd89db726231ff7097414c64aac9 Mon Sep 17 00:00:00 2001
From: Abhishek S Lal <abhishek@usebruno.com>
Date: Wed, 1 Apr 2026 21:33:18 +0530
Subject: [PATCH] feat: add blur event handling to MultiLineEditor and
 SingleLineEditor components (#7619)

- Implemented a new _onBlur method to set the cursor position when the editor loses focus.
- Updated event listeners to include the blur event for both MultiLineEditor and SingleLineEditor, enhancing user experience by preserving cursor position.
- Ensured proper cleanup of event listeners during component unmounting to prevent memory leaks.
---
 .../src/components/MultiLineEditor/index.js         | 13 ++++++++++++-
 .../src/components/SingleLineEditor/index.js        |  8 ++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/packages/bruno-app/src/components/MultiLineEditor/index.js b/packages/bruno-app/src/components/MultiLineEditor/index.js
index 45271f2cb..2a7ede5b9 100644
--- a/packages/bruno-app/src/components/MultiLineEditor/index.js
+++ b/packages/bruno-app/src/components/MultiLineEditor/index.js
@@ -78,6 +78,7 @@ class MultiLineEditor extends Component {
 
     this.editor.setValue(String(this.props.value) || '');
     this.editor.on('change', this._onEdit);
+    this.editor.on('blur', this._onBlur);
     this.addOverlay(variables);
 
     // Initialize masking if this is a secret field
@@ -85,6 +86,12 @@ class MultiLineEditor extends Component {
     this._enableMaskedEditor(this.props.isSecret);
   }
 
+  _onBlur = () => {
+    if (this.editor) {
+      this.editor.setCursor(this.editor.getCursor());
+    }
+  };
+
   _onEdit = () => {
     if (!this.ignoreChangeEvent && this.editor) {
       this.cachedValue = this.editor.getValue();
@@ -172,7 +179,11 @@ class MultiLineEditor extends Component {
       this.maskedEditor.destroy();
       this.maskedEditor = null;
     }
-    this.editor.getWrapperElement().remove();
+    if (this.editor) {
+      this.editor.off('change', this._onEdit);
+      this.editor.off('blur', this._onBlur);
+      this.editor.getWrapperElement().remove();
+    }
   }
 
   addOverlay = (variables) => {
diff --git a/packages/bruno-app/src/components/SingleLineEditor/index.js b/packages/bruno-app/src/components/SingleLineEditor/index.js
index e1f97676c..ccd4b0d3d 100644
--- a/packages/bruno-app/src/components/SingleLineEditor/index.js
+++ b/packages/bruno-app/src/components/SingleLineEditor/index.js
@@ -94,6 +94,7 @@ class SingleLineEditor extends Component {
     this.editor.setValue(String(this.props.value ?? ''));
     this.editor.on('change', this._onEdit);
     this.editor.on('paste', this._onPaste);
+    this.editor.on('blur', this._onBlur);
     this.addOverlay(variables);
     this._enableMaskedEditor(this.props.isSecret);
     this.setState({ maskInput: this.props.isSecret });
@@ -127,6 +128,12 @@ class SingleLineEditor extends Component {
     }
   };
 
+  _onBlur = () => {
+    if (this.editor) {
+      this.editor.setCursor(this.editor.getCursor());
+    }
+  };
+
   _onEdit = () => {
     if (!this.ignoreChangeEvent && this.editor) {
       this.cachedValue = this.editor.getValue();
@@ -206,6 +213,7 @@ class SingleLineEditor extends Component {
       }
       this.editor.off('change', this._onEdit);
       this.editor.off('paste', this._onPaste);
+      this.editor.off('blur', this._onBlur);
       this._clearNewlineMarkers();
       this.editor.getWrapperElement().remove();
       this.editor = null;