Merge pull request #121 from vtex-apps/fix/autocomplete

PER-1009: Close autocomplete when clicking on an item inside it
vtex-apps · Mar 22, 2021 · 964bcb5 · 964bcb5
2 parents ea3b5f1 + f593b64
commit 964bcb5
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Fixed
+- Close autocomplete when clicking on an item inside it.
+
 ## [2.7.0] - 2021-03-18
 
 ### Added

diff --git a/react/components/Autocomplete/index.tsx b/react/components/Autocomplete/index.tsx
@@ -77,6 +77,7 @@ interface AutoCompleteProps {
     actionOnClick: () => void
   }>
   customPage?: string
+  closeMenu: () => void
 }
 
 interface AutoCompleteState {
@@ -174,6 +175,12 @@ class AutoComplete extends React.Component<
     }
   }
 
+  closeModal() {
+    if (this.props.closeMenu) {
+      this.props.closeMenu()
+    }
+  }
+
   componentDidUpdate(prevProps: AutoCompleteProps) {
     if (!this.shouldUpdate(prevProps)) {
       return
@@ -410,11 +417,14 @@ class AutoComplete extends React.Component<
         showTitle={!hasSuggestion || !this.props.hideTitles}
         onItemHover={this.handleItemHover}
         showTitleOnEmpty={this.props.maxSuggestedTerms !== 0}
-        onItemClick={handleItemClick(
-          this.props.push,
-          this.props.runtime.page,
-          EventType.SearchSuggestionClick
-        )}
+        onItemClick={(value, position) => {
+          handleItemClick(
+            this.props.push,
+            this.props.runtime.page,
+            EventType.SearchSuggestionClick
+          )(value, position)
+          this.closeModal()
+        }}
         customPage={this.props.customPage}
       />
     )
@@ -436,11 +446,14 @@ class AutoComplete extends React.Component<
             title={<FormattedMessage id="store/topSearches" />}
             items={this.state.topSearchedItems || []}
             showTitle={!this.props.hideTitles}
-            onItemClick={handleItemClick(
-              this.props.push,
-              this.props.runtime.page,
-              EventType.TopSearchClick
-            )}
+            onItemClick={(value, position) => {
+              handleItemClick(
+                this.props.push,
+                this.props.runtime.page,
+                EventType.TopSearchClick
+              )(value, position)
+              this.closeModal()
+            }}
             customPage={this.props.customPage}
           />
         ) : null}
@@ -452,11 +465,14 @@ class AutoComplete extends React.Component<
             title={<FormattedMessage id="store/history" />}
             items={this.state.history || []}
             showTitle={!this.props.hideTitles}
-            onItemClick={handleItemClick(
-              this.props.push,
-              this.props.runtime.page,
-              EventType.HistoryClick
-            )}
+            onItemClick={(value, position) => {
+              handleItemClick(
+                this.props.push,
+                this.props.runtime.page,
+                EventType.HistoryClick
+              )(value, position)
+              this.closeModal()
+            }}
             customPage={this.props.customPage}
           />
         ) : null}
@@ -486,8 +502,14 @@ class AutoComplete extends React.Component<
           totalProducts={totalProducts || 0}
           layout={this.getProductLayout()}
           isLoading={isProductsLoading}
-          onProductClick={handleProductClick(push, runtime.page)}
-          onSeeAllClick={handleSeeAllClick(push, runtime.page)}
+          onProductClick={(id, position) => {
+            handleProductClick(push, runtime.page)(id, position)
+            this.closeModal()
+          }}
+          onSeeAllClick={term => {
+            handleSeeAllClick(push, runtime.page)(term)
+            this.closeModal()
+          }}
           HorizontalProductSummary={this.props.HorizontalProductSummary}
         />
       </>