diff --git a/CHANGELOG.md b/CHANGELOG.md index 501b728a..759b6178 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/src/forms/PriceFilterForm/PriceFilterForm.js b/src/forms/PriceFilterForm/PriceFilterForm.js index 7eb68bc3..5981123d 100644 --- a/src/forms/PriceFilterForm/PriceFilterForm.js +++ b/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 ( { 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