Fix multi select filters in filter panel

CHANGELOG.md

@@ -12,9 +12,12 @@ way to update this template, but currently, we follow a pattern:
 
 ---
 
-## Upcoming version
+## v1.3.0
 * [change] Reusable SearchMap.
   [#877](https://github.com/sharetribe/flex-template-web/pull/877)
+* [fix] Fix a search filters panel bug where selecting an option in a multi select filter ends up
+  invoking a mobile filter callback function.
+  [#876](https://github.com/sharetribe/flex-template-web/pull/876)
 * [change] Use seeded random for client side coordinate obfuscation
   [#874](https://github.com/sharetribe/flex-template-web/pull/874)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "app",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "private": true,
   "license": "Apache-2.0",
   "dependencies": {

src/components/SearchFilters/SearchFilters.js

@@ -53,9 +53,13 @@ const SearchFiltersComponent = props => {
     id: 'SearchFilters.amenitiesLabel',
   });
 
-  const initialAmenities = initialValues(urlQueryParams, amenitiesFilter.paramName);
+  const initialAmenities = amenitiesFilter
+    ? initialValues(urlQueryParams, amenitiesFilter.paramName)
+    : null;
 
-  const initialCategory = initialValue(urlQueryParams, categoryFilter.paramName);
+  const initialCategory = categoryFilter
+    ? initialValue(urlQueryParams, categoryFilter.paramName)
+    : null;
 
   const handleSelectOptions = (urlParam, options) => {
     const queryParams =
@@ -89,6 +93,7 @@ const SearchFiltersComponent = props => {
 
   const amenitiesFilterElement = amenitiesFilter ? (
     <SelectMultipleFilter
+      id={'SearchFilters.amenitiesFilter'}
       name="amenities"
       urlParam={amenitiesFilter.paramName}
       label={amenitiesLabel}

src/components/SearchFiltersMobile/SearchFiltersMobile.js

@@ -153,7 +153,7 @@ class SearchFiltersMobileComponent extends Component {
     const categoryLabel = intl.formatMessage({
       id: 'SearchFiltersMobile.categoryLabel',
     });
-    const initialCategory = this.initialValue(categoryFilter.paramName);
+    const initialCategory = categoryFilter ? this.initialValue(categoryFilter.paramName) : null;
 
     const categoryFilterElement = categoryFilter ? (
       <SelectSingleFilterPlain
@@ -172,6 +172,7 @@ class SearchFiltersMobileComponent extends Component {
 
     const amenitiesFilterElement = amenitiesFilter ? (
       <SelectMultipleFilterPlain
+        id="SearchFiltersMobile.amenitiesFilter"
         name="amenities"
         urlParam={amenitiesFilter.paramName}
         label={amenitiesLabel}

src/components/SelectMultipleFilter/SelectMultipleFilter.example.js

@@ -54,6 +54,7 @@ const AmenitiesFilterComponent = withRouter(props => {
 
   return (
     <SelectMultipleFilter
+      id="SelectMultipleFilterExample"
       name="amenities"
       urlParam={URL_PARAM}
       label="Amenities"

src/components/SelectMultipleFilter/SelectMultipleFilter.js

@@ -91,7 +91,7 @@ class SelectMultipleFilter extends Component {
   }
 
   render() {
-    const { rootClassName, className, name, label, options, initialValues, intl } = this.props;
+    const { rootClassName, className, id, name, label, options, initialValues, intl } = this.props;
     const classes = classNames(rootClassName || css.root, className);
 
     const hasInitialValues = initialValues.length > 0;
@@ -123,7 +123,7 @@ class SelectMultipleFilter extends Component {
           {buttonLabel}
         </button>
         <SelectMultipleFilterForm
-          form={`SelectMultipleFilterForm.${name}`}
+          id={id}
           onSubmit={this.handleSubmit}
           initialValues={namedInitialValues}
           enableReinitialize={true}
@@ -153,6 +153,7 @@ SelectMultipleFilter.defaultProps = {
 SelectMultipleFilter.propTypes = {
   rootClassName: string,
   className: string,
+  id: string.isRequired,
   name: string.isRequired,
   urlParam: string.isRequired,
   label: string.isRequired,

src/components/SelectMultipleFilterPlain/SelectMultipleFilterPlain.example.js

@@ -55,6 +55,7 @@ const AmenitiesFilterComponent = props => {
 
   return (
     <SelectMultipleFilterPlain
+      id="SelectMultipleFilterPlainExample"
       name="amenities"
       urlParam={URL_PARAM}
       label="Amenities"

src/components/SelectMultipleFilterPlain/SelectMultipleFilterPlain.js

@@ -76,7 +76,7 @@ class SelectMultipleFilterPlainComponent extends Component {
           </button>
         </div>
         <SelectMultipleFilterPlainForm
-          form={`SelectMultipleFilterPlainForm.${id ? id : name}`}
+          id={id}
           className={optionsContainerClass}
           name={name}
           options={options}
@@ -94,15 +94,14 @@ class SelectMultipleFilterPlainComponent extends Component {
 SelectMultipleFilterPlainComponent.defaultProps = {
   rootClassName: null,
   className: null,
-  id: undefined,
   initialValues: [],
   twoColumns: false,
 };
 
 SelectMultipleFilterPlainComponent.propTypes = {
   rootClassName: string,
   className: string,
-  id: string,
+  id: string.isRequired,
   name: string.isRequired,
   urlParam: string.isRequired,
   label: string.isRequired,

src/forms/SelectMultipleFilterForm/SelectMultipleFilterForm.js

@@ -17,6 +17,7 @@ const SelectMultipleFilterFormComponent = props => {
         const {
           form,
           handleSubmit,
+          id,
           name,
           onClear,
           onCancel,
@@ -48,7 +49,7 @@ const SelectMultipleFilterFormComponent = props => {
             <FieldCheckboxGroup
               className={css.fieldGroup}
               name={name}
-              id={`${name}-checkbox-group`}
+              id={`${id}-checkbox-group`}
               options={options}
             />
             <div className={css.buttonsWrapper}>
@@ -75,6 +76,7 @@ SelectMultipleFilterFormComponent.defaultProps = {
 };
 
 SelectMultipleFilterFormComponent.propTypes = {
+  id: string.isRequired,
   name: string.isRequired,
   onClear: func.isRequired,
   onCancel: func.isRequired,

src/forms/SelectMultipleFilterPlainForm/SelectMultipleFilterPlainForm.js

@@ -20,11 +20,11 @@ const SelectMultipleFilterPlainForm = props => {
       onSubmit={() => null}
       mutators={{ ...arrayMutators }}
       render={formRenderProps => {
-        const { className, name, options, twoColumns } = formRenderProps;
+        const { className, id, name, options, twoColumns } = formRenderProps;
         return (
           <Form className={className}>
             <FormSpy onChange={handleChange} subscription={{ values: true, dirty: true }} />
-            <FieldCheckboxGroup name={name} id={name} options={options} twoColumns={twoColumns} />
+            <FieldCheckboxGroup name={name} id={id} options={options} twoColumns={twoColumns} />
           </Form>
         );
       }}
@@ -40,6 +40,7 @@ SelectMultipleFilterPlainForm.defaultProps = {
 
 SelectMultipleFilterPlainForm.propTypes = {
   className: string,
+  id: string.isRequired,
   name: string.isRequired,
   options: arrayOf(
     shape({