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

Fix autocomplete when clicking on the add to cart button

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

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 (

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>,
 }