Merge pull request #681 from vtex-apps/fix/filter-sidebar-close

Fix: filter sidebar closes when clicking shipping option drawer

react/components/FilterNavigator/legacy/FilterSidebar.js

@@ -13,6 +13,7 @@ import { facetOptionShape } from '../../../constants/propTypes'
 import useSelectedFilters from './hooks/useSelectedFilters'
 import searchResult from './searchResult.css'
 import QueryContext from '../../QueryContext'
+import isShippingOptionsComponent from '../../../utils/isShippingOptionsComponent'
 
 const FilterSidebar = ({ filters, preventRouteChange = false }) => {
   const { navigate, setQuery } = useRuntime()
@@ -49,7 +50,11 @@ const FilterSidebar = ({ filters, preventRouteChange = false }) => {
     }
   }
 
-  const handleClose = () => {
+  const handleClose = e => {
+    if (isShippingOptionsComponent(e)) {
+      return
+    }
+
     setOpen(false)
   }
 

react/components/FilterSidebar.js

@@ -23,6 +23,7 @@ import {
   filterCategoryDepartmentCollectionAndFT,
 } from '../utils/queryAndMapUtils'
 import { pushFilterManipulationPixelEvent } from '../utils/filterManipulationPixelEvents'
+import isShippingOptionsComponent from '../utils/isShippingOptionsComponent'
 
 const CSS_HANDLES = [
   'filterPopupButton',
@@ -110,7 +111,11 @@ const FilterSidebar = ({
     }
   }
 
-  const handleClose = () => {
+  const handleClose = e => {
+    if (isShippingOptionsComponent(e)) {
+      return
+    }
+
     setOpen(false)
   }
 

react/utils/isShippingOptionsComponent.js

@@ -0,0 +1,23 @@
+const SHIPPING_OPTION_COMPONENT_DRAWER_CLASS =
+  'vtex-shipping-option-components-0-x-drawer'
+
+const SHIPPING_OPTION_COMPONENT_OVERLAY_CLASS =
+  'vtex-shipping-option-components-0-x-overlay'
+
+const isShippingOptionsComponent = e => {
+  if (!e.target) {
+    return false
+  }
+
+  const shippingOptionsDawerElement = e.target.closest(
+    `.${SHIPPING_OPTION_COMPONENT_DRAWER_CLASS}`
+  )
+
+  const isShippingOptionsOverlayElement = e.target.classList.contains(
+    SHIPPING_OPTION_COMPONENT_OVERLAY_CLASS
+  )
+
+  return shippingOptionsDawerElement || isShippingOptionsOverlayElement
+}
+
+export default isShippingOptionsComponent