From ec4ae1269d263e3beb90568bd7601f940c37cb44 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= <aljullu@gmail.com>
Date: Tue, 26 Nov 2019 17:43:27 +0100
Subject: [PATCH]  Filter by Attribute: Allow reselecting unselected attribute 
 (https://github.com/woocommerce/woocommerce-blocks/pull/1264)

* Filter by Attribute: Allow reselecting unselected attribute

* Run prettier
---
 .../assets/js/blocks/attribute-filter/edit.js | 41 ++++++++++---------
 1 file changed, 22 insertions(+), 19 deletions(-)

diff --git a/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/edit.js b/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/edit.js
index db6884e77a1..39cdcb57186 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/edit.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/edit.js
@@ -216,28 +216,31 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak } ) => {
 		);
 	}, [] );
 
-	const onChange = useCallback( ( selected ) => {
-		const selectedId = selected[ 0 ].id;
-		const productAttribute = find( ATTRIBUTES, [
-			'attribute_id',
-			selectedId.toString(),
-		] );
+	const onChange = useCallback(
+		( selected ) => {
+			const selectedId = selected[ 0 ].id;
+			const productAttribute = find( ATTRIBUTES, [
+				'attribute_id',
+				selectedId.toString(),
+			] );
 
-		if ( ! productAttribute || attributeId === selectedId ) {
-			return;
-		}
+			if ( ! productAttribute || attributeId === selectedId ) {
+				return;
+			}
 
-		const attributeName = productAttribute.attribute_name;
+			const attributeName = productAttribute.attribute_name;
 
-		setAttributes( {
-			attributeId: selectedId,
-			heading: sprintf(
-				// Translators: %s attribute name.
-				__( 'Filter by %s', 'woo-gutenberg-products-block' ),
-				attributeName
-			),
-		} );
-	}, [] );
+			setAttributes( {
+				attributeId: selectedId,
+				heading: sprintf(
+					// Translators: %s attribute name.
+					__( 'Filter by %s', 'woo-gutenberg-products-block' ),
+					attributeName
+				),
+			} );
+		},
+		[ attributeId ]
+	);
 
 	const renderAttributeControl = () => {
 		const messages = {