stasm · stasm · Sep 12, 2017 · Sep 11, 2017
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,7 +2,11 @@
 
 ## Unreleased
 
-  - …
+  - Dispatch the render event on roots.
+
+    The render event provides a hook to add custom logic after the render is
+    complete. It allows to restore focus, selection and caret positions after
+    render.
 
 ## 0.1.0 (September 8, 2017)
 

diff --git a/README.md b/README.md
@@ -250,9 +250,12 @@ I know, I know.  But it works!  Check out the examples:
 
   - [example01][] - an obligatory Todo App.
   - [example02][] by @flynnham.
+  - [example03][] illustrates limitations of _innerself_ when dealing with text
+    inputs and how to work around them.
 
 [example01]: https://stasm.github.io/innerself/example01/
 [example02]: https://stasm.github.io/innerself/example02/
+[example03]: https://stasm.github.io/innerself/example03/
 
 
 ## How It Works

diff --git a/example03/App.js b/example03/App.js
@@ -0,0 +1,12 @@
+import html from "../index";
+import { connect } from "./store";
+
+import TextInput from "./TextInput";
+import CharCounter from "./CharCounter";
+
+export default function App(idx) {
+    return html`
+        ${TextInput(idx)}
+        ${CharCounter()}
+    `;
+}
diff --git a/example03/CharCounter.js b/example03/CharCounter.js
@@ -0,0 +1,10 @@
+import html from "../index";
+import { connect } from "./store";
+
+function CharCounter({value}) {
+    return html`
+        <div>Characters typed: ${value.length}</div>
+    `;
+}
+
+export default connect(CharCounter);
diff --git a/example03/README.md b/example03/README.md
@@ -0,0 +1,11 @@
+# innerself example 03
+
+An example illustrating how much hand-holding innerself needs to handle
+form-based elements.  Because the assignment to innerHTML completely re-creates
+the entire DOM tree under the root, all local state of the descendant elements
+is lost upop re-render.  Focus and selection need to be restored manually.
+
+To install the dependencies and serve the example locally run:
+
+    $ npm install
+    $ npm start
diff --git a/example03/TextInput.js b/example03/TextInput.js
@@ -0,0 +1,12 @@
+import html from "../index";
+import { connect } from "./store";
+
+function TextInput({value}, idx) {
+    return html`
+        <textarea id="text-input-${idx}"
+            placeholder="Type here…"
+            onkeyup="dispatch('CHANGE_VALUE', this)">${value}</textarea>
+    `;
+}
+
+export default connect(TextInput);
diff --git a/example03/index.html b/example03/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<meta charset="utf8">
+<title>innerself example 03</title>
+<script defer src="dist.js"></script>
+
+<h1>innerself example 03</h1>
+<h2>Focus is lost after re-render by default</h2>
+<div id="root1"></div>
+<h2>Use the render event to restore focus</h2>
+<div id="root2"></div>
+<h2>Use the render event to restore focus and caret position</h2>
+<div id="root3"></div>
+
+
diff --git a/example03/index.js b/example03/index.js
@@ -0,0 +1,29 @@
+import { attach } from "./store";
+import App from "./App";
+
+const root1 = document.querySelector("#root1");
+const root2 = document.querySelector("#root2");
+const root3 = document.querySelector("#root3");
+
+attach(() => App(1), root1);
+attach(() => App(2), root2);
+attach(() => App(3), root3);
+
+root2.addEventListener("render", function(event) {
+    // event.detail is the state that was rendered.
+    const { id, selectionStart, selectionEnd } = event.detail;
+    if (id) {
+        const textarea = root2.querySelector("#" + id);
+        textarea.focus();
+    }
+});
+
+root3.addEventListener("render", function(event) {
+    // event.detail is the state that was rendered.
+    const { id, selectionStart, selectionEnd } = event.detail;
+    if (id) {
+        const textarea = root3.querySelector("#" + id);
+        textarea.focus();
+        textarea.setSelectionRange(selectionStart, selectionEnd);
+    }
+});