From adabdf928e8364e74a4fd725eef70f6ffe1ceeab Mon Sep 17 00:00:00 2001
From: Tom Dye <tomdye@users.noreply.github.com>
Date: Wed, 8 Apr 2020 20:15:59 +0100
Subject: [PATCH] Optionally Controlled textinput (#1357)

* value for text input

* number input
---
 src/examples/src/config.tsx                   |  6 ++++
 .../src/widgets/text-input/Controlled.tsx     | 31 +++++++++++++++++++
 src/number-input/index.tsx                    | 10 ++----
 .../tests/unit/NumberInput.spec.tsx           |  8 ++++-
 src/text-input/index.tsx                      | 17 ++++++----
 src/text-input/tests/unit/TextInput.spec.tsx  | 19 ++++++++++++
 6 files changed, 77 insertions(+), 14 deletions(-)
 create mode 100644 src/examples/src/widgets/text-input/Controlled.tsx

diff --git a/src/examples/src/config.tsx b/src/examples/src/config.tsx
index df610e7c87..76277a4dca 100644
--- a/src/examples/src/config.tsx
+++ b/src/examples/src/config.tsx
@@ -165,6 +165,7 @@ import HiddenLabelTextArea from './widgets/text-area/HiddenLabel';
 import ValidatedCustomTextArea from './widgets/text-area/ValidatedCustom';
 import ValidatedRequiredTextArea from './widgets/text-area/ValidatedRequired';
 import BasicTextInput from './widgets/text-input/Basic';
+import ControlledTextInput from './widgets/text-input/Controlled';
 import DisabledTextInput from './widgets/text-input/Disabled';
 import HelperTextInput from './widgets/text-input/HelperText';
 import HiddenLabelTextInput from './widgets/text-input/HiddenLabel';
@@ -1375,6 +1376,11 @@ export const config = {
 					module: PlaceholderTextInput,
 					title: 'TextInput with placeholder and no label'
 				},
+				{
+					filename: 'Controlled',
+					module: ControlledTextInput,
+					title: 'Controlled TextInput'
+				},
 				{
 					filename: 'Disabled',
 					module: DisabledTextInput,
diff --git a/src/examples/src/widgets/text-input/Controlled.tsx b/src/examples/src/widgets/text-input/Controlled.tsx
new file mode 100644
index 0000000000..d1cfc9270b
--- /dev/null
+++ b/src/examples/src/widgets/text-input/Controlled.tsx
@@ -0,0 +1,31 @@
+import { create, tsx } from '@dojo/framework/core/vdom';
+import icache from '@dojo/framework/core/middleware/icache';
+import TextInput from '@dojo/widgets/text-input';
+import Button from '@dojo/widgets/button';
+
+const factory = create({ icache });
+
+const Example = factory(function Controlled({ middleware: { icache } }) {
+	return (
+		<virtual>
+			<TextInput
+				value={icache.getOrSet('value', '')}
+				onValue={(value) => {
+					icache.set('value', value);
+				}}
+			>
+				{{ label: 'Controlled input with reset' }}
+			</TextInput>
+			<Button
+				onClick={() => {
+					icache.set('value', '');
+				}}
+			>
+				Reset input
+			</Button>
+			<div>The value text input is: "{icache.getOrSet('value', '')}"</div>
+		</virtual>
+	);
+});
+
+export default Example;
diff --git a/src/number-input/index.tsx b/src/number-input/index.tsx
index 60622cb99d..b6ef0e86e4 100644
--- a/src/number-input/index.tsx
+++ b/src/number-input/index.tsx
@@ -21,12 +21,7 @@ const factory = create({ theme })
 	.children<TextInputChildren | undefined>();
 
 export default factory(function NumberInput({ properties, children, middleware: { theme } }) {
-	const { initialValue, onValue } = properties();
-
-	const valueAsString =
-		initialValue !== undefined && initialValue !== null
-			? initialValue.toString()
-			: initialValue;
+	const { initialValue, value, onValue } = properties();
 
 	function onValueAdapter(valueAsString: string | undefined) {
 		if (!onValue) {
@@ -42,7 +37,8 @@ export default factory(function NumberInput({ properties, children, middleware:
 	return (
 		<TextInput
 			{...properties()}
-			initialValue={valueAsString}
+			value={value === undefined ? value : `${value}`}
+			initialValue={initialValue === undefined ? initialValue : `${initialValue}`}
 			onValue={onValueAdapter}
 			type="number"
 			theme={theme.compose(
diff --git a/src/number-input/tests/unit/NumberInput.spec.tsx b/src/number-input/tests/unit/NumberInput.spec.tsx
index 3fe9284f56..a3b56c5baf 100644
--- a/src/number-input/tests/unit/NumberInput.spec.tsx
+++ b/src/number-input/tests/unit/NumberInput.spec.tsx
@@ -20,6 +20,7 @@ const baseTemplate = assertionTemplate(() => (
 		theme={{ '@dojo/widgets/text-input': textInputCss }}
 		onValue={noop}
 		initialValue={undefined}
+		value={undefined}
 	/>
 ));
 
@@ -29,6 +30,10 @@ registerSuite('NumberInput', {
 			const h = harness(() => <NumberInput />, [compareTheme]);
 			h.expect(baseTemplate);
 		},
+		'can take controlled property'() {
+			const h = harness(() => <NumberInput value={42} />, [compareTheme]);
+			h.expect(baseTemplate.setProperty(':root', 'value', '42'));
+		},
 		'passes expected properties to underlying TextInput'() {
 			const baseProperties: BaseInputProperties<{ value: number }> = {
 				aria: { foo: 'bar' },
@@ -48,7 +53,8 @@ registerSuite('NumberInput', {
 				onValue: noop,
 				readOnly: true,
 				initialValue: 42,
-				widgetId: 'widgetId'
+				widgetId: 'widgetId',
+				value: undefined
 			};
 
 			const h = harness(
diff --git a/src/text-input/index.tsx b/src/text-input/index.tsx
index 58eb70f984..8f1a6c5a69 100644
--- a/src/text-input/index.tsx
+++ b/src/text-input/index.tsx
@@ -58,6 +58,8 @@ export interface BaseInputProperties<T extends { value: any } = { value: string
 	required?: boolean;
 	/** The initial value */
 	initialValue?: T['value'];
+	/** The controlled value */
+	value?: T['value'];
 	/** The id to be applied to the input */
 	widgetId?: string;
 }
@@ -167,15 +169,18 @@ export const TextInput = factory(function TextInput({
 		widgetId = `text-input-${id}`
 	} = properties();
 
+	let { value } = properties();
 	const [{ label, leading, trailing } = {} as TextInputChildren] = children();
 
-	let value = icache.get('value');
-	const existingInitialValue = icache.get('initialValue');
+	if (value === undefined) {
+		value = icache.get('value');
+		const existingInitialValue = icache.get('initialValue');
 
-	if (initialValue !== existingInitialValue) {
-		icache.set('value', initialValue);
-		icache.set('initialValue', initialValue);
-		value = initialValue;
+		if (initialValue !== existingInitialValue) {
+			icache.set('value', initialValue);
+			icache.set('initialValue', initialValue);
+			value = initialValue;
+		}
 	}
 
 	const pattern = patternValue instanceof RegExp ? patternValue.source : patternValue;
diff --git a/src/text-input/tests/unit/TextInput.spec.tsx b/src/text-input/tests/unit/TextInput.spec.tsx
index f7a76f76ce..769dd9d4c0 100644
--- a/src/text-input/tests/unit/TextInput.spec.tsx
+++ b/src/text-input/tests/unit/TextInput.spec.tsx
@@ -203,6 +203,25 @@ registerSuite('TextInput', {
 			h.expect(expected);
 		},
 
+		'controlled value'() {
+			const h = harness(() => <TextInput value="foo" />);
+			const valueTemplate = baseAssertion
+				.setProperty('@input', 'value', 'foo')
+				.setProperty('@wrapper', 'classes', [
+					css.wrapper,
+					null,
+					null,
+					null,
+					null,
+					null,
+					null,
+					null,
+					null,
+					css.noLabel
+				]);
+			h.expect(valueTemplate);
+		},
+
 		'custom properties'() {
 			const h = harness(() => (
 				<TextInput