mirror of
https://github.com/usebruno/bruno.git
synced 2026-06-11 09:51:30 +00:00
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:
@@ -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) => {
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user