Fix autocompletion in IE11

editor/components/rich-text/tinymce.js

@@ -9,15 +9,101 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { Component, createElement } from '@wordpress/element';
+import { keycodes } from '@wordpress/utils';
 
 /**
  * Internal dependencies
  */
 import { diffAriaProps, pickAriaProps } from './aria';
 import { valueToString } from './format';
 
+const { BACKSPACE, DELETE } = keycodes;
+
+/**
+ * Determines whether we need a fix to provide `input` events for contenteditable.
+ *
+ * @param {Element} editorNode The root editor node.
+ *
+ * @return {boolean} A boolean indicating whether the fix is needed.
+ */
+function needsInternetExplorerInputFix( editorNode ) {
+	return (
+		// Rely on userAgent in the absence of a reasonable feature test for contenteditable `input` events.
+		/Trident/.test( window.navigator.userAgent ) &&
+		// IE11 dispatches input events for `<input>` and `<textarea>`.
+		! /input/i.test( editorNode.tagName ) &&
+		! /textarea/i.test( editorNode.tagName )
+	);
+}
+
+/**
+ * Applies a fix that provides `input` events for contenteditable in Internet Explorer.
+ *
+ * @param {Element} editorNode The root editor node.
+ *
+ * @return {Function} A function to remove the fix (for cleanup).
+ */
+function applyInternetExplorerInputFix( editorNode ) {
+	/**
+	 * Dispatches `input` events in response to `textinput` events.
+	 *
+	 * IE provides a `textinput` event that is similar to an `input` event,
+	 * and we use it to manually dispatch an `input` event.
+	 * `textinput` is dispatched for text entry but for not deletions.
+	 *
+	 * @param {Event} textInputEvent An Internet Explorer `textinput` event.
+	 */
+	function mapTextInputEvent( textInputEvent ) {
+		textInputEvent.stopImmediatePropagation();
+
+		const inputEvent = document.createEvent( 'Event' );
+		inputEvent.initEvent( 'input', true, false );
+		inputEvent.data = textInputEvent.data;
+		textInputEvent.target.dispatchEvent( inputEvent );
+	}
+
+	/**
+	 * Dispatches `input` events in response to Delete and Backspace keyup.
+	 *
+	 * It would be better dispatch an `input` event after each deleting
+	 * `keydown` because the DOM is updated after each, but it is challenging
+	 * to determine the right time to dispatch `input` since propagation of
+	 * `keydown` can be stopped at any point.
+	 *
+	 * It's easier to listen for `keyup` in the capture phase and dispatch
+	 * `input` before `keyup` propagates further. It's not perfect, but should
+	 * be good enough.
+	 *
+	 * @param {KeyboardEvent} keyUp
+	 * @param {Node}          keyUp.target  The event target.
+	 * @param {number}        keyUp.keyCode The key code.
+	 */
+	function mapDeletionKeyUpEvents( { target, keyCode } ) {
+		const isDeletion = BACKSPACE === keyCode || DELETE === keyCode;
+
+		if ( isDeletion && editorNode.contains( target ) ) {
+			const inputEvent = document.createEvent( 'Event' );
+			inputEvent.initEvent( 'input', true, false );
+			inputEvent.data = null;
+			target.dispatchEvent( inputEvent );
+		}
+	}
+
+	editorNode.addEventListener( 'textinput', mapTextInputEvent );
+	document.addEventListener( 'keyup', mapDeletionKeyUpEvents, true );
+	return function removeInternetExplorerInputFix() {
+		editorNode.removeEventListener( 'textinput', mapTextInputEvent );
+		document.removeEventListener( 'keyup', mapDeletionKeyUpEvents, true );
+	};
+}
+
 const IS_PLACEHOLDER_VISIBLE_ATTR_NAME = 'data-is-placeholder-visible';
 export default class TinyMCE extends Component {
+	constructor() {
+		super();
+		this.bindEditorNode = this.bindEditorNode.bind( this );
+	}
+
 	componentDidMount() {
 		this.initialize();
 	}
@@ -96,6 +182,23 @@ export default class TinyMCE extends Component {
 		} );
 	}
 
+	bindEditorNode( editorNode ) {
+		this.editorNode = editorNode;
+
+		/**
+		 * A ref function can be used for cleanup because React calls it with
+		 * `null` when unmounting.
+		 */
+		if ( this.removeInternetExplorerInputFix ) {
+			this.removeInternetExplorerInputFix();
+			this.removeInternetExplorerInputFix = null;
+		}
+
+		if ( editorNode && needsInternetExplorerInputFix( editorNode ) ) {
+			this.removeInternetExplorerInputFix = applyInternetExplorerInputFix( editorNode );
+		}
+	}
+
 	render() {
 		const { tagName = 'div', style, defaultValue, className, isPlaceholderVisible, format } = this.props;
 		const ariaProps = pickAriaProps( this.props );
@@ -112,7 +215,7 @@ export default class TinyMCE extends Component {
 			className: classnames( className, 'editor-rich-text__tinymce' ),
 			contentEditable: true,
 			[ IS_PLACEHOLDER_VISIBLE_ATTR_NAME ]: isPlaceholderVisible,
-			ref: ( node ) => this.editorNode = node,
+			ref: this.bindEditorNode,
 			style,
 			suppressContentEditableWarning: true,
 			dangerouslySetInnerHTML: { __html: valueToString( defaultValue, format ) },