Prevent cursor jumps inside contenteditable

demo/contenteditable.js

@@ -0,0 +1,25 @@
+import { createElement } from 'preact';
+import { useState } from 'preact/hooks';
+
+export default function Contenteditable() {
+	const [value, setValue] = useState("Hey there<br />I'm editable!");
+
+	return (
+		<div>
+			<div>
+				<button onClick={() => setValue('')}>Clear!</button>
+			</div>
+			<div
+				style={{
+					border: '1px solid gray',
+					padding: '8px',
+					margin: '8px 0',
+					background: 'white'
+				}}
+				contentEditable
+				onInput={e => setValue(e.currentTarget.innerHTML)}
+				dangerouslySetInnerHTML={{ __html: value }}
+			/>
+		</div>
+	);
+}

demo/index.js

@@ -23,6 +23,7 @@ import TextFields from './textFields';
 import ReduxBug from './reduxUpdate';
 import SuspenseRouterBug from './suspense-router';
 import NestedSuspenseBug from './nested-suspense';
+import Contenteditable from './contenteditable';
 import { MobXDemo } from './mobx';
 
 let isBenchmark = /(\/spiral|\/pythagoras|[#&]bench)/g.test(
@@ -131,6 +132,9 @@ class App extends Component {
 						<Link href="/nested-suspense" activeClassName="active">
 							Nested Suspense Bug
 						</Link>
+						<Link href="/contenteditable" activeClassName="active">
+							contenteditable
+						</Link>
 					</nav>
 				</header>
 				<main>
@@ -160,6 +164,7 @@ class App extends Component {
 						<ReduxBug path="/reduxBug/:start" />
 						<SuspenseRouterBug path="/suspense-router" />
 						<NestedSuspenseBug path="/nested-suspense" />
+						<Contenteditable path="/contenteditable" />
 					</Router>
 				</main>
 			</div>

src/diff/index.js

@@ -381,7 +381,11 @@ function diffElementNodes(
 
 			if (newHtml || oldHtml) {
 				// Avoid re-applying the same '__html' if it did not changed between re-render
-				if (!newHtml || !oldHtml || newHtml.__html != oldHtml.__html) {
+				if (
+					!newHtml ||
+					((!oldHtml || newHtml.__html != oldHtml.__html) &&
+						newHtml.__html !== dom.innerHTML)
+				) {
 					dom.innerHTML = (newHtml && newHtml.__html) || '';
 				}
 			}

test/browser/render.test.js

@@ -1,5 +1,5 @@
 import { setupRerender } from 'preact/test-utils';
-import { createElement, render, Component, options } from 'preact';
+import { createElement, render, Component, options, createRef } from 'preact';
 import {
 	setupScratch,
 	teardown,
@@ -8,9 +8,11 @@ import {
 	serializeHtml,
 	supportsDataList,
 	sortAttributes,
-	spyOnElementAttributes
+	spyOnElementAttributes,
+	createEvent
 } from '../_util/helpers';
 import { clearLog, getLog, logCall } from '../_util/logCall';
+import { useState } from 'preact/hooks';
 
 /** @jsx createElement */
 
@@ -789,6 +791,41 @@ describe('render()', () => {
 		expect(checkbox.checked).to.equal(true);
 	});
 
+	it('should always diff `contenteditable` `innerHTML` against the DOM', () => {
+		// This prevents cursor jumps in contenteditable fields
+		// See https://github.com/preactjs/preact/issues/2691
+
+		function Editable() {
+			const [value, setValue] = useState('Hello');
+
+			return (
+				<div
+					contentEditable
+					dangerouslySetInnerHTML={{ __html: value }}
+					onInput={e => setValue(e.currentTarget.innerHTML)}
+				/>
+			);
+		}
+
+		render(<Editable />, scratch);
+
+		let editable = scratch.querySelector('[contenteditable]');
+		editable.innerHTML = 'World';
+		editable.dispatchEvent(createEvent('input'));
+		const range = document.createRange();
+		range.selectNodeContents(editable);
+		const sel = window.getSelection();
+		sel.removeAllRanges();
+		sel.addRange(range);
+
+		expect(window.getSelection().getRangeAt(0).endOffset).to.equal(1);
+		rerender();
+
+		editable = scratch.querySelector('[contenteditable]');
+		expect(editable.innerHTML).to.equal('World');
+		expect(window.getSelection().getRangeAt(0).endOffset).to.equal(1);
+	});
+
 	it('should not re-render when a component returns undefined', () => {
 		let Dialog = () => undefined;
 		let updateState;