From 38cb34299972bf981f16489c3091829f20fd4d17 Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Wed, 20 Feb 2019 12:36:46 +0200 Subject: [PATCH 1/4] Fix mobile SelectMultipleFilter. It didn't call onSubmit after latest Final Form update was introduced to PR949. (v2.9.0)) --- .../SelectMultipleFilter.css | 23 ++++++++++++++++ .../SelectMultipleFilter.js | 27 ++++++++++++++++--- 2 files changed, 47 insertions(+), 3 deletions(-) diff --git a/src/components/SelectMultipleFilter/SelectMultipleFilter.css b/src/components/SelectMultipleFilter/SelectMultipleFilter.css index 9a390f84..78bad234 100644 --- a/src/components/SelectMultipleFilter/SelectMultipleFilter.css +++ b/src/components/SelectMultipleFilter/SelectMultipleFilter.css @@ -42,7 +42,30 @@ } } +.fieldGroup { + margin: 0; + padding: 0; + border: none; +} + .fieldGroupPlain { + margin: 0; padding-left: 20px; padding-bottom: 30px; + border: none; +} + +.list { + margin: 0; +} + +.item { + padding: 2px 0; + + /* Fix broken multi-column layout in Chrome */ + page-break-inside: avoid; + + @media (--viewportMedium) { + padding: 4px 0; + } } diff --git a/src/components/SelectMultipleFilter/SelectMultipleFilter.js b/src/components/SelectMultipleFilter/SelectMultipleFilter.js index 3b04b988..1bd4b658 100644 --- a/src/components/SelectMultipleFilter/SelectMultipleFilter.js +++ b/src/components/SelectMultipleFilter/SelectMultipleFilter.js @@ -2,11 +2,32 @@ import React, { Component } from 'react'; import { array, arrayOf, func, number, string } from 'prop-types'; import classNames from 'classnames'; import { injectIntl, intlShape } from 'react-intl'; -import { FieldCheckboxGroup } from '../../components'; +import { FieldCheckbox } from '../../components'; import { FilterPopup, FilterPlain } from '../../components'; import css from './SelectMultipleFilter.css'; +// SelectMultipleFilter doesn't need array mutators since it doesn't require validation. +// TODO: Live edit didn't work with FieldCheckboxGroup +// There's a mutation problem: formstate.dirty is not reliable with it. +const GroupOfFieldCheckboxes = props => { + const { id, className, name, options } = props; + return ( +
+ +
+ ); +}; + class SelectMultipleFilter extends Component { constructor(props) { super(props); @@ -101,7 +122,7 @@ class SelectMultipleFilter extends Component { urlParam={urlParam} {...rest} > - - Date: Wed, 20 Feb 2019 12:38:53 +0200 Subject: [PATCH 2/4] Fix minor bug in SelectMultipleFilter on desktop. Rerendering lost dirty values when hovering on ListingCard. --- src/components/FilterPlain/FilterPlain.js | 7 ++++++- src/components/FilterPopup/FilterPopup.js | 4 ++++ .../SelectMultipleFilter/SelectMultipleFilter.js | 1 + 3 files changed, 11 insertions(+), 1 deletion(-) diff --git a/src/components/FilterPlain/FilterPlain.js b/src/components/FilterPlain/FilterPlain.js index da36e9a4..30839e3d 100644 --- a/src/components/FilterPlain/FilterPlain.js +++ b/src/components/FilterPlain/FilterPlain.js @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { bool, func, node, string } from 'prop-types'; +import { bool, func, node, object, string } from 'prop-types'; import classNames from 'classnames'; import { injectIntl, intlShape, FormattedMessage } from 'react-intl'; @@ -45,6 +45,7 @@ class FilterPlainComponent extends Component { isSelected, children, initialValues, + keepDirtyOnReinitialize, contentPlacementOffset, } = this.props; const classes = classNames(rootClassName || css.root, className); @@ -74,6 +75,7 @@ class FilterPlainComponent extends Component { contentPlacementOffset={contentPlacementOffset} onChange={this.handleChange} initialValues={initialValues} + keepDirtyOnReinitialize={keepDirtyOnReinitialize} > {children} @@ -88,6 +90,7 @@ FilterPlainComponent.defaultProps = { className: null, plainClassName: null, initialValues: null, + keepDirtyOnReinitialize: false, }; FilterPlainComponent.propTypes = { @@ -99,6 +102,8 @@ FilterPlainComponent.propTypes = { label: node.isRequired, isSelected: bool.isRequired, children: node.isRequired, + initialValues: object, + keepDirtyOnReinitialize: bool, // form injectIntl intl: intlShape.isRequired, diff --git a/src/components/FilterPopup/FilterPopup.js b/src/components/FilterPopup/FilterPopup.js index dd076349..a3fa4669 100644 --- a/src/components/FilterPopup/FilterPopup.js +++ b/src/components/FilterPopup/FilterPopup.js @@ -106,6 +106,7 @@ class FilterPopup extends Component { isSelected, children, initialValues, + keepDirtyOnReinitialize, contentPlacementOffset, } = this.props; @@ -142,6 +143,7 @@ class FilterPopup extends Component { showAsPopup contentPlacementOffset={contentPlacementOffset} initialValues={initialValues} + keepDirtyOnReinitialize={keepDirtyOnReinitialize} onSubmit={this.handleSubmit} onCancel={this.handleCancel} onClear={this.handleClear} @@ -161,6 +163,7 @@ FilterPopup.defaultProps = { className: null, popupClassName: null, initialValues: null, + keepDirtyOnReinitialize: false, contentPlacementOffset: 0, liveEdit: false, label: null, @@ -174,6 +177,7 @@ FilterPopup.propTypes = { urlParam: string.isRequired, onSubmit: func.isRequired, initialValues: object, + keepDirtyOnReinitialize: bool, contentPlacementOffset: number, label: string.isRequired, isSelected: bool.isRequired, diff --git a/src/components/SelectMultipleFilter/SelectMultipleFilter.js b/src/components/SelectMultipleFilter/SelectMultipleFilter.js index 1bd4b658..d8429f76 100644 --- a/src/components/SelectMultipleFilter/SelectMultipleFilter.js +++ b/src/components/SelectMultipleFilter/SelectMultipleFilter.js @@ -120,6 +120,7 @@ class SelectMultipleFilter extends Component { onSubmit={handleSubmit} initialValues={namedInitialValues} urlParam={urlParam} + keepDirtyOnReinitialize {...rest} > Date: Wed, 20 Feb 2019 12:39:37 +0200 Subject: [PATCH 3/4] Remove flashing CSS outline from FilterForm. --- src/forms/FilterForm/FilterForm.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/forms/FilterForm/FilterForm.css b/src/forms/FilterForm/FilterForm.css index 8fb5f9ff..327d5213 100644 --- a/src/forms/FilterForm/FilterForm.css +++ b/src/forms/FilterForm/FilterForm.css @@ -1,6 +1,7 @@ @import '../../marketplace.css'; .root { + outline: none; } .contentWrapper { From 942b379de19e488dc63d0b1779839b74f82127f8 Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Wed, 20 Feb 2019 13:00:37 +0200 Subject: [PATCH 4/4] Update Changelog --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 023b1ee6..48712be2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,10 @@ way to update this template, but currently, we follow a pattern: ## Upcoming version 2019-XX-XX +- [fix] SelectMultipleFilter had a bug on mobile layout - `onSubmit` didn't get called. This fixes + also two other issues with SelectMultipleFilter: hovering on ListingCard removed dirty values on + repaint and there was an outline flashing on FilterForm when clicking checkboxes. + [#1025](https://github.com/sharetribe/flex-template-web/pull/1025) - [fix] Small changes in CSS files in order to match content width with the footer in pages where the footer is visible. Also, make side layout (used e.g. in `TermsOfServicePage`, `InboxPage`, `ContactDetailsPage`) align width footer better. Check responsive layouts carefulle after taking