Merge 04f3a39 into 33c8360

mangle.json

@@ -39,7 +39,8 @@
       "$_render": "__r",
       "$_hook": "__h",
       "$_catchError": "__e",
-      "$_unmount": "_e"
+      "$_unmount": "_e",
+      "$_lastValue": "__s"
     }
   }
 }

src/diff/index.js

@@ -255,6 +255,10 @@ function diffElementNodes(dom, newVNode, oldVNode, context, isSvg, excessDomChil
 		// (as above, don't diff props during hydration)
 		if (!isHydrating) {
 			if (('value' in newProps) && newProps.value!==undefined && newProps.value !== dom.value) dom.value = newProps.value==null ? '' : newProps.value;
+			// preact/#1899
+			// We need this value for input masking.
+			dom._lastValue = dom.value;
+
 			if (('checked' in newProps) && newProps.checked!==undefined && newProps.checked !== dom.checked) dom.checked = newProps.checked;
 		}
 	}

src/diff/props.js

@@ -122,5 +122,6 @@ function setProperty(dom, name, value, oldValue, isSvg) {
  * @private
  */
 function eventProxy(e) {
-	return this._listeners[e.type](options.event ? options.event(e) : e);
+	this._listeners[e.type](options.event ? options.event(e) : e);
+	if (this._lastValue!=this.value) this.value = this._lastValue;
 }

test/browser/render.test.js

@@ -25,6 +25,12 @@ function sortAttributes(html) {
 	});
 }
 
+function fireEvent(on, type) {
+	let e = document.createEvent('Event');
+	e.initEvent(type, true, true);
+	on.dispatchEvent(e);
+}
+
 describe('render()', () => {
 	let scratch, rerender;
 
@@ -274,6 +280,35 @@ describe('render()', () => {
 		expect(root.children[3]).to.have.property('value', '');
 	});
 
+	it('should sync controlled input value', () => {
+		class Controlled extends Component {
+			constructor(props) {
+				super(props);
+				this.state = { v: '' };
+				this.onInput = e => {
+					this.setState({ v: e.target.value.slice(0, 3) });
+				};
+			}
+
+			render() {
+				return <input value={this.state.v} onInput={this.onInput} />;
+			}
+		}
+
+		render(<Controlled />, scratch);
+
+		const input = scratch.firstChild;
+		input.value = 'abc';
+		fireEvent(input, 'input');
+		rerender();
+
+		input.value = 'abcde';
+		fireEvent(input, 'input');
+		expect(input.value).to.equal('abc');
+		rerender();
+		expect(input.value).to.equal('abc');
+	});
+
 	it('should set value inside the specified range', () => {
 		render(
 			<input type="range" value={0.5} min="0" max="1" step="0.05" />,
@@ -509,12 +544,6 @@ describe('render()', () => {
 	describe('event handling', () => {
 		let proto;
 
-		function fireEvent(on, type) {
-			let e = document.createEvent('Event');
-			e.initEvent(type, true, true);
-			on.dispatchEvent(e);
-		}
-
 		beforeEach(() => {
 			proto = document.createElement('div').constructor.prototype;