diff --git a/CHANGELOG.md b/CHANGELOG.md index 84316053cf..68202cefef 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,8 @@ way to update this template, but currently, we follow a pattern: ## Upcoming version 2020-XX-XX +- [fix] PriceFilterPopup: filter popup is not closing when clicking outside on Safari. + [#1455](https://github.com/sharetribe/ftw-daily/pull/1455) - [fix] Add missing helper: isNumber. Used when Number.MAX_SAFE_INTEGER is reached. [#1453](https://github.com/sharetribe/ftw-daily/pull/1453) - [fix] minutesBetween: remove thrown an error on negative diff. diff --git a/src/components/PriceFilter/PriceFilterPopup.js b/src/components/PriceFilter/PriceFilterPopup.js index c062e75a47..207dfd1d18 100644 --- a/src/components/PriceFilter/PriceFilterPopup.js +++ b/src/components/PriceFilter/PriceFilterPopup.js @@ -1,11 +1,13 @@ import React, { Component } from 'react'; import { arrayOf, func, node, number, shape, string } from 'prop-types'; import classNames from 'classnames'; + +import config from '../../config'; import { injectIntl, intlShape } from '../../util/reactIntl'; import { propTypes } from '../../util/types'; import { formatCurrencyMajorUnit } from '../../util/currency'; -import config from '../../config'; +import { OutsideClickHandler } from '../../components'; import { PriceFilterForm } from '../../forms'; import css from './PriceFilterPopup.module.css'; @@ -74,12 +76,8 @@ class PriceFilterPopup extends Component { onSubmit(initialValues); } - handleBlur(event) { - // FocusEvent is fired faster than the link elements native click handler - // gets its own event. Therefore, we need to check the origin of this FocusEvent. - if (!this.filter.contains(event.relatedTarget)) { - this.setState({ isOpen: false }); - } + handleBlur() { + this.setState({ isOpen: false }); } handleKeyDown(e) { @@ -160,35 +158,36 @@ class PriceFilterPopup extends Component { const contentStyle = this.positionStyleForContent(); return ( -
{ - this.filter = node; - }} - > - - { - this.filterContent = node; + +
{ + this.filter = node; }} - style={contentStyle} - min={min} - max={max} - step={step} - showAsPopup - isOpen={this.state.isOpen} - /> -
+ > + + { + this.filterContent = node; + }} + style={contentStyle} + min={min} + max={max} + step={step} + showAsPopup + isOpen={this.state.isOpen} + /> +
+ ); } }