Merge pull request #1101 from sharetribe/filter-bug

Fix empty priceFilter bug

CHANGELOG.md

@@ -14,6 +14,9 @@ way to update this template, but currently, we follow a pattern:
 
 ## Upcoming version 2019-XX-XX
 
+- [fix] Emptying the priceFilter component in the searchPage caused a page breaking error.
+  [#1101](https://github.com/sharetribe/flex-template-web/pull/1101)
+
 ## [v2.17.0] 2019-05-23
 
 - [change] Mapbox library dependencies updated to v1.0.0.

src/forms/PriceFilterForm/PriceFilterForm.js

@@ -13,20 +13,20 @@ const DEBOUNCE_WAIT_TIME = 400;
 // Helper function to parse value for min handle
 // Value needs to be between slider's minimum value and current maximum value
 const parseMin = (min, currentMax) => value => {
-  if (isNaN(value)) {
-    return min;
-  }
   const parsedValue = Number.parseInt(value, 10);
+  if (isNaN(parsedValue)) {
+    return '';
+  }
   return parsedValue < min ? min : parsedValue > currentMax ? currentMax : parsedValue;
 };
 
 // Helper function to parse value for max handle
 // Value needs to be between slider's max value and current minimum value
 const parseMax = (max, currentMin) => value => {
-  if (isNaN(value)) {
-    return max;
-  }
   const parsedValue = Number.parseInt(value, 10);
+  if (isNaN(parsedValue)) {
+    return '';
+  }
   return parsedValue < currentMin ? currentMin : parsedValue > max ? max : parsedValue;
 };
 
@@ -47,14 +47,30 @@ const PriceFilterFormComponent = props => {
   const handleChange = debounce(
     formState => {
       if (formState.dirty) {
-        onChange(formState.values);
+        const { minPrice, maxPrice, ...restValues } = formState.values;
+        onChange({
+          minPrice: minPrice === '' ? rest.min : minPrice,
+          maxPrice: maxPrice === '' ? rest.max : maxPrice,
+          ...restValues,
+        });
       }
     },
     DEBOUNCE_WAIT_TIME,
     { leading: false, trailing: true }
   );
 
-  const formCallbacks = liveEdit ? { onSubmit: () => null } : { onSubmit, onCancel, onClear };
+  const handleSubmit = values => {
+    const { minPrice, maxPrice, ...restValues } = values;
+    return onSubmit({
+      minPrice: minPrice === '' ? rest.min : minPrice,
+      maxPrice: maxPrice === '' ? rest.max : maxPrice,
+      ...restValues,
+    });
+  };
+
+  const formCallbacks = liveEdit
+    ? { onSubmit: () => null }
+    : { onSubmit: handleSubmit, onCancel, onClear };
   return (
     <FinalForm
       {...rest}
@@ -76,7 +92,9 @@ const PriceFilterFormComponent = props => {
           max,
           step,
         } = formRenderProps;
-        const { minPrice, maxPrice } = values;
+        const { minPrice: minPriceRaw, maxPrice: maxPriceRaw } = values;
+        const minPrice = typeof minPriceRaw !== 'string' ? minPriceRaw : min;
+        const maxPrice = typeof maxPriceRaw !== 'string' ? maxPriceRaw : max;
 
         const handleCancel = () => {
           // reset the final form to initialValues