fixed the popup issues

denisprotassoff · Oct 5, 2022 · 3edf4b2 · 3edf4b2
1 parent 7768d7b
commit 3edf4b2
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 13 deletions.
diff --git a/packages/scandipwa/src/component/ClickOutside/ClickOutside.component.tsx b/packages/scandipwa/src/component/ClickOutside/ClickOutside.component.tsx
@@ -39,14 +39,20 @@ export class ClickOutsideComponent extends PureComponent<ClickOutsideComponentPr
 
         this.handleClick = this.handleClick.bind(this);
 
-        this.childrenRefs = Children.map(
-            children,
+        this.childrenRefs = Children.toArray(children).map(
             () => createRef<HTMLElement>(),
         ) || [];
     }
 
     componentDidMount(): void {
-        document.addEventListener('click', this.handleClick);
+        /*
+         * delaying adding the clickoutside event because of the issue with popup,
+         * where event was triggered immediatly
+         * vvv
+        */
+        setTimeout(() => {
+            document.addEventListener('click', this.handleClick);
+        }, 0);
     }
 
     componentWillUnmount(): void {

diff --git a/packages/scandipwa/src/component/NavigationAbstract/NavigationAbstract.container.tsx b/packages/scandipwa/src/component/NavigationAbstract/NavigationAbstract.container.tsx
@@ -59,6 +59,13 @@ State extends NavigationAbstractContainerState,
 
         setNavigationState(this.getNavigationState());
         history.listen((history) => {
+            const { state } = history;
+
+            // vvv ignoring the route change for popup
+            if (state && state.popupOpen) {
+                return;
+            }
+
             this.handlePageScroll();
             this.setState(this.onRouteChanged(history));
         });

diff --git a/packages/scandipwa/src/component/Popup/Popup.container.tsx b/packages/scandipwa/src/component/Popup/Popup.container.tsx
@@ -20,6 +20,7 @@ import { hideActiveOverlay, hideActivePopup } from 'Store/Overlay/Overlay.action
 import { PopupPayload } from 'Store/Popup/Popup.type';
 import { ReactElement } from 'Type/Common.type';
 import { noopFn } from 'Util/Common';
+import history from 'Util/History';
 import { RootState } from 'Util/Store/Store.type';
 
 import Popup from './Popup.component';
@@ -75,7 +76,7 @@ export class PopupContainer extends PureComponent<PopupContainerProps> {
             name: Page.POPUP,
             title: this._getPopupTitle(),
             onCloseClick: () => {
-                history.back();
+                history.goBack();
             },
         });
 
@@ -99,7 +100,6 @@ export class PopupContainer extends PureComponent<PopupContainerProps> {
             contentMix,
             onClose,
             onHide,
-            onVisible,
             shouldPopupClose,
             hideActiveOverlay,
             resetHideActivePopup,
@@ -120,7 +120,6 @@ export class PopupContainer extends PureComponent<PopupContainerProps> {
             shouldPopupClose,
             onClose,
             onHide,
-            onVisible,
             hideActiveOverlay,
             resetHideActivePopup,
             goToPreviousNavigationState,

diff --git a/packages/scandipwa/src/component/Product/Product.component.tsx b/packages/scandipwa/src/component/Product/Product.component.tsx
@@ -86,15 +86,13 @@ export class ProductComponent<P extends ProductComponentProps = ProductComponent
             product: {
                 options,
             },
-
             updateSelectedValues,
         } = this.props;
 
         return (
             <ProductCustomizableOptions
               options={ options }
               updateSelectedValues={ updateSelectedValues }
-
             />
         );
     }

diff --git a/packages/scandipwa/src/component/Router/Router.component.tsx b/packages/scandipwa/src/component/Router/Router.component.tsx
@@ -384,10 +384,10 @@ export class RouterComponent extends PureComponent<RouterComponentProps, RouterC
 
         return (
             <ErrorHandler setBigOfflineNotice={ setBigOfflineNotice }>
-                    <div block="Router" elem="MainItems">
-                        { this.renderMainItems() }
-                    </div>
-                    { this.renderSectionOfType(RouterItemType.AFTER_ITEMS_TYPE) }
+                <div block="Router" elem="MainItems">
+                    { this.renderMainItems() }
+                </div>
+                { this.renderSectionOfType(RouterItemType.AFTER_ITEMS_TYPE) }
             </ErrorHandler>
         );
     }

diff --git a/packages/scandipwa/src/route/ProductComparePage/ProductComparePage.container.tsx b/packages/scandipwa/src/route/ProductComparePage/ProductComparePage.container.tsx
@@ -19,6 +19,7 @@ import { NavigationType } from 'Store/Navigation/Navigation.type';
 import { showNotification } from 'Store/Notification/Notification.action';
 import { ReactElement } from 'Type/Common.type';
 import { scrollToTop } from 'Util/Browser';
+import history from 'Util/History';
 import DataContainer from 'Util/Request/DataContainer';
 import { RootState } from 'Util/Store/Store.type';
 
@@ -100,7 +101,7 @@ export class ProductComparePageContainer extends DataContainer<ProductComparePag
         setHeaderState({
             name: Page.PRODUCT_COMPARE,
             title: __('Compare'),
-            onBackClick: () => history.back(),
+            onBackClick: () => history.goBack(),
         });
     }