Reset the form back to initial state after selecting a variation

Automattic · Nov 8, 2017 · d488f4b · d488f4b
1 parent a3370f8
commit d488f4b
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/client/extensions/woocommerce/components/product-search/row.js b/client/extensions/woocommerce/components/product-search/row.js
@@ -103,7 +103,7 @@ class ProductSearchRow extends Component {
 		} );
 	};
 
-	updateItem = attributes => {
+	updateItem = ( attributes, callback ) => {
 		const { variations } = this.props;
 		// Don't swap the product if we have an "any" selected
 		if ( -1 !== values( attributes ).indexOf( 'any' ) ) {
@@ -135,6 +135,9 @@ class ProductSearchRow extends Component {
 			if ( variationId && ! this.isSelected( variationId ) ) {
 				this.props.onChange( variationId );
 			}
+			if ( typeof callback === 'function' ) {
+				callback();
+			}
 		}
 	};
 

diff --git a/client/extensions/woocommerce/components/product-search/variations.js b/client/extensions/woocommerce/components/product-search/variations.js
@@ -4,7 +4,7 @@
  */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { filter, forEach, kebabCase, sortBy } from 'lodash';
+import { filter, forEach, kebabCase, keys, sortBy } from 'lodash';
 import { localize } from 'i18n-calypso';
 
 /**
@@ -36,7 +36,17 @@ class ProductVariations extends Component {
 
 	onChange = name => event => {
 		this.state[ name ] = event.target.value;
-		this.props.onChange( this.state );
+		this.props.onChange( this.state, this.resetAttrs );
+	};
+
+	resetAttrs = () => {
+		this.setState( prevState => {
+			const newState = {};
+			keys( prevState ).map( name => {
+				newState[ name ] = DEFAULT_ATTR;
+			} );
+			return newState;
+		} );
 	};
 
 	renderAttribute = attribute => {
@@ -49,6 +59,7 @@ class ProductVariations extends Component {
 				<FormSelect
 					id={ `select-${ kebabCase( attribute.name ) }` }
 					onChange={ this.onChange( attribute.name ) }
+					value={ this.state[ attribute.name ] }
 				>
 					<option key={ DEFAULT_ATTR } value={ DEFAULT_ATTR }>
 						{ translate( 'Select one' ) }