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.
This commit is contained in:
Abhishek S Lal
2026-04-01 21:33:18 +05:30
committed by GitHub
parent c8abb5be16
commit 97467c57bf
2 changed files with 20 additions and 1 deletions

View File

@@ -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) => {

View File

@@ -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;