Merge pull request #137 from vtex-apps/feature/add-missing-closemenu

Feature/add missing closemenu
vtex-apps · Jun 29, 2021 · 31cf634 · 31cf634
2 parents fa959df + c0d287e
commit 31cf634
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 1 deletion.
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]
 
+### Added
+- `closeModal` function to the `Attribute` component and to the close button.
+
 ## [2.8.0] - 2021-04-29
 
 ### Removed

diff --git a/react/components/Autocomplete/components/ItemList/Attribute.tsx b/react/components/Autocomplete/components/ItemList/Attribute.tsx
@@ -8,6 +8,7 @@ interface IAttributeProps {
   item: Item
   onMouseOver: (ee: React.MouseEvent | React.FocusEvent, item: Item) => void
   onMouseOut: () => void
+  closeModal: () => void
 }
 
 const Attribute = (props: IAttributeProps) =>
@@ -26,6 +27,7 @@ const Attribute = (props: IAttributeProps) =>
             className={`${stylesCss.itemListSubItemLink} c-on-base`}
             to={`/${props.item.value}/${attribute.value}`}
             query={`map=ft,${attribute.key}`}
+            onClick={() => props.closeModal()}
           >
             {attribute.label}
           </Link>

diff --git a/react/components/Autocomplete/components/ItemList/ItemList.tsx b/react/components/Autocomplete/components/ItemList/ItemList.tsx
@@ -15,6 +15,7 @@ interface ItemListProps {
   onItemHover?: (item: Item | AttributeItem) => void
   showTitleOnEmpty?: boolean
   customPage?: string
+  closeModal: () => void
 }
 
 interface ItemListState {
@@ -104,6 +105,7 @@ export class ItemList extends React.Component<ItemListProps> {
                   item={item}
                   onMouseOver={this.handleMouseOver}
                   onMouseOut={this.handleMouseOut}
+                  closeModal={this.props.closeModal}
                 />
               </li>
             )

diff --git a/react/components/Autocomplete/index.tsx b/react/components/Autocomplete/index.tsx
@@ -426,6 +426,7 @@ class AutoComplete extends React.Component<
           this.closeModal()
         }}
         customPage={this.props.customPage}
+        closeModal={() => this.closeModal()}
       />
     )
   }
@@ -455,6 +456,7 @@ class AutoComplete extends React.Component<
               this.closeModal()
             }}
             customPage={this.props.customPage}
+            closeModal={() => this.closeModal()}
           />
         ) : null}
 
@@ -474,6 +476,7 @@ class AutoComplete extends React.Component<
               this.closeModal()
             }}
             customPage={this.props.customPage}
+            closeModal={() => this.closeModal()}
           />
         ) : null}
       </div>
@@ -610,7 +613,10 @@ class AutoComplete extends React.Component<
           <ProductListProvider listName="autocomplete-result-list">
             {this.renderContent()}
             {this.props.isMobile ? (
-              <button className={stylesCss['close-btn']}>
+              <button
+                onClick={() => this.closeModal()}
+                className={stylesCss['close-btn']}
+              >
                 <IconClose />
               </button>
             ) : null}