Disable outsideClick listener from FilterFrequency component #1387

if tether DatePicker was shown
metasfresh · Jan 17, 2018 · 8178717 · 8178717
1 parent c21f9ad
commit 8178717
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 9 deletions.
diff --git a/src/components/filters/FiltersFrequent.js b/src/components/filters/FiltersFrequent.js
@@ -12,6 +12,13 @@ const classes = "btn btn-filter btn-meta-outline-secondary btn-sm";
 class FiltersFrequent extends Component {
   state = { openFilterId: null };
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      allowOutsideClickListener: true
+    };
+  }
+
   toggleFilter = index => {
     this.setState({
       openFilterId: index
@@ -24,8 +31,15 @@ class FiltersFrequent extends Component {
 
   outsideClick = () => {
     const { widgetShown, dropdownToggled } = this.props;
-    !widgetShown && this.toggleFilter(null, null);
-    dropdownToggled();
+    const { allowOutsideClickListener } = this.state;
+    if (allowOutsideClickListener) {
+      !widgetShown && this.toggleFilter(null, null);
+      dropdownToggled();
+    }
+  };
+
+  allowOutsideClickListener = value => {
+    this.setState({ allowOutsideClickListener: value });
   };
 
   render() {
@@ -115,6 +129,7 @@ class FiltersFrequent extends Component {
                   onHide={() => handleShow(false)}
                   viewId={viewId}
                   outsideClick={this.outsideClick}
+                  allowOutsideClickListener={this.allowOutsideClickListener}
                 />
               )}
             </div>

diff --git a/src/components/filters/FiltersItem.js b/src/components/filters/FiltersItem.js
@@ -144,7 +144,8 @@ class FiltersItem extends Component {
       onHide,
       viewId,
       outsideClick,
-      captionValue
+      captionValue,
+      allowOutsideClickListener
     } = this.props;
 
     const { filter, isTooltipShow } = this.state;
@@ -198,7 +199,13 @@ class FiltersItem extends Component {
                       caption={item.caption}
                       noLabel={false}
                       filterWidget={true}
-                      {...{ viewId, windowType, onShow, onHide }}
+                      {...{
+                        viewId,
+                        windowType,
+                        onShow,
+                        onHide,
+                        allowOutsideClickListener
+                      }}
                     />
                   ))}
               </div>

diff --git a/src/components/widget/DatePicker.js b/src/components/widget/DatePicker.js
@@ -1,6 +1,5 @@
 import PropTypes from "prop-types";
 import React, { Component } from "react";
-import Datetime from "react-datetime";
 import { connect } from "react-redux";
 import TetheredDateTime from "./TetheredDateTime";
 import { addNotification } from "../../actions/AppActions";
@@ -11,7 +10,8 @@ const propTypes = {
   patch: PropTypes.func,
   field: PropTypes.string,
   value: PropTypes.any,
-  isOpenDatePicker: PropTypes.bool
+  isOpenDatePicker: PropTypes.bool,
+  allowOutsideClickListener: PropTypes.func // function to manage outside Click Listener from FilterFrequency component
 };
 
 class DatePicker extends Component {
@@ -51,17 +51,20 @@ class DatePicker extends Component {
   };
 
   handleFocus = () => {
-    const { value } = this.props;
+    const { value, allowOutsideClickListener } = this.props;
     this.setState({
       cache: value,
       open: true
     });
+    allowOutsideClickListener && allowOutsideClickListener(false);
   };
 
   handleClose = () => {
+    const { allowOutsideClickListener } = this.props;
     this.setState({
       open: false
     });
+    allowOutsideClickListener && allowOutsideClickListener(true);
   };
 
   handleClickOutside = () => {

diff --git a/src/components/widget/RawWidget.js b/src/components/widget/RawWidget.js
@@ -224,7 +224,8 @@ class RawWidget extends Component {
       attribute,
       allowShowPassword,
       onBlurWidget,
-      defaultValue
+      defaultValue,
+      allowOutsideClickListener
     } = this.props;
     const widgetValue = data || widgetData[0].value;
     const { isEdited } = this.state;
@@ -297,7 +298,10 @@ class RawWidget extends Component {
                   date ? Moment(date).format(DATE_FORMAT) : null
                 )
               }
-              handleBackdropLock={handleBackdropLock}
+              {...{
+                allowOutsideClickListener,
+                handleBackdropLock
+              }}
             />
           ];
         }