Optionally Controlled textinput (#1357)

* value for text input * number input
dojo · Apr 8, 2020 · adabdf9 · adabdf9
1 parent 6bb8fe4
commit adabdf9
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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