From 9ccad2376b2fc0290e7b0ea9cb7234f96f17c153 Mon Sep 17 00:00:00 2001
From: Thalyta Fabrine <thalyta.trindade@vtex.com.br>
Date: Wed, 7 Apr 2021 09:46:52 -0300
Subject: [PATCH] Fix autocomplete when clicking on the add to cart button

---
 CHANGELOG.md                                 |  3 +++
 react/ProductSummaryCustom.tsx               | 10 ++++++++--
 react/__mocks__/vtex.product-list-context.js |  1 +
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 629ccc44..508d81d6 100644
--- 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
+- Autocomplete closing when clicking on the Add to Cart button.
+
 ## [2.71.1] - 2021-04-05
 
 ### Fixed
diff --git a/react/ProductSummaryCustom.tsx b/react/ProductSummaryCustom.tsx
index 08e1deb6..9e331e5c 100644
--- a/react/ProductSummaryCustom.tsx
+++ b/react/ProductSummaryCustom.tsx
@@ -50,6 +50,10 @@ function ProductSummaryCustom({
 
   const productListDispatch = ProductListContext.useProductListDispatch()
 
+  const productListState = ProductListContext.useProductListState()
+  const autocompleteSummary =
+    productListState?.listName === 'autocomplete-result-list'
+
   const inViewRef = useRef<HTMLDivElement | null>(null)
   const onView = useCallback(() => {
     productListDispatch?.({
@@ -130,7 +134,8 @@ function ProductSummaryCustom({
   const linkProps = href
     ? {
         to: href,
-        onClickCapture: actionOnClick,
+        onClick: autocompleteSummary ? actionOnClick : undefined,
+        onClickCapture: autocompleteSummary ? undefined : actionOnClick,
       }
     : {
         page: 'store.product',
@@ -139,7 +144,8 @@ function ProductSummaryCustom({
           id: product?.productId,
         },
         query,
-        onClickCapture: actionOnClick,
+        onClick: autocompleteSummary ? actionOnClick : undefined,
+        onClickCapture: autocompleteSummary ? undefined : actionOnClick,
       }
 
   return (
diff --git a/react/__mocks__/vtex.product-list-context.js b/react/__mocks__/vtex.product-list-context.js
index c03fb313..62dab010 100644
--- a/react/__mocks__/vtex.product-list-context.js
+++ b/react/__mocks__/vtex.product-list-context.js
@@ -3,6 +3,7 @@ import React, { Fragment } from 'react'
 export const useProductImpression = () => null
 export const ProductListContext = {
   useProductListDispatch: () => null,
+  useProductListState: () => null,
   // eslint-disable-next-line react/display-name
   ProductListProvider: ({ children }) => <Fragment>{children}</Fragment>,
 }