RichText: selectionChange: bind on focus, unbind on blur (#12480)

* RichText: selectionChange: bind on focus, unbind on blur * Remove isActive check
WordPress · Nov 30, 2018 · 2094200 · 2094200
1 parent b650f4a
commit 2094200
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 18 deletions.
diff --git a/packages/editor/src/components/rich-text/index.js b/packages/editor/src/components/rich-text/index.js
@@ -93,6 +93,7 @@ export class RichText extends Component {
 
 		this.onSetup = this.onSetup.bind( this );
 		this.onFocus = this.onFocus.bind( this );
+		this.onBlur = this.onBlur.bind( this );
 		this.onChange = this.onChange.bind( this );
 		this.onDeleteKeyDown = this.onDeleteKeyDown.bind( this );
 		this.onKeyDown = this.onKeyDown.bind( this );
@@ -108,7 +109,6 @@ export class RichText extends Component {
 		this.isEmpty = this.isEmpty.bind( this );
 		this.valueToFormat = this.valueToFormat.bind( this );
 		this.setRef = this.setRef.bind( this );
-		this.isActive = this.isActive.bind( this );
 		this.valueToEditableHTML = this.valueToEditableHTML.bind( this );
 
 		this.formatToValue = memize( this.formatToValue.bind( this ), { size: 1 } );
@@ -129,22 +129,10 @@ export class RichText extends Component {
 		this.lastHistoryValue = value;
 	}
 
-	componentDidMount() {
-		document.addEventListener( 'selectionchange', this.onSelectionChange );
-	}
-
-	componentWillUnmount() {
-		document.removeEventListener( 'selectionchange', this.onSelectionChange );
-	}
-
 	setRef( node ) {
 		this.editableRef = node;
 	}
 
-	isActive() {
-		return this.editableRef === document.activeElement;
-	}
-
 	/**
 	 * Handles the onSetup event for the TinyMCE component.
 	 *
@@ -354,6 +342,12 @@ export class RichText extends Component {
 		if ( unstableOnFocus ) {
 			unstableOnFocus();
 		}
+
+		document.addEventListener( 'selectionchange', this.onSelectionChange );
+	}
+
+	onBlur() {
+		document.removeEventListener( 'selectionchange', this.onSelectionChange );
 	}
 
 	/**
@@ -392,11 +386,6 @@ export class RichText extends Component {
 	 * Handles the `selectionchange` event: sync the selection to local state.
 	 */
 	onSelectionChange() {
-		// Ensure it's the active element. This is a global event.
-		if ( ! this.isActive() ) {
-			return;
-		}
-
 		const { start, end, formats } = this.createRecord();
 
 		if ( start !== this.state.start || end !== this.state.end ) {
@@ -891,6 +880,7 @@ export class RichText extends Component {
 								onCompositionEnd={ this.onCompositionEnd }
 								onKeyDown={ this.onKeyDown }
 								onFocus={ this.onFocus }
+								onBlur={ this.onBlur }
 								multilineTag={ this.multilineTag }
 								multilineWrapperTags={ this.multilineWrapperTags }
 								setRef={ this.setRef }

diff --git a/packages/editor/src/components/rich-text/tinymce.js b/packages/editor/src/components/rich-text/tinymce.js
@@ -350,6 +350,7 @@ export default class TinyMCE extends Component {
 			onInput,
 			onKeyDown,
 			onCompositionEnd,
+			onBlur,
 		} = this.props;
 
 		/*
@@ -377,6 +378,7 @@ export default class TinyMCE extends Component {
 			onPaste,
 			onInput,
 			onFocus: this.onFocus,
+			onBlur,
 			onKeyDown,
 			onCompositionEnd,
 		} );