diff --git a/src/components/filters/FiltersFrequent.js b/src/components/filters/FiltersFrequent.js index e27c4448e..97c4e2b7e 100644 --- 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} /> )} diff --git a/src/components/filters/FiltersItem.js b/src/components/filters/FiltersItem.js index 15453380b..4bd61260e 100644 --- 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 + }} /> ))} diff --git a/src/components/widget/DatePicker.js b/src/components/widget/DatePicker.js index 1d8a0d876..ffee07e1d 100644 --- 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 index b769f5419..81f3c762b 100644 --- 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 + }} /> ]; }