makes front-end pages store and respect dropdown states

packages/cms/src/api/mortarRoute.js

@@ -749,9 +749,12 @@ module.exports = function(app) {
     // where we want them to.
     profile.sections.forEach(section => {
       section.selectors.forEach(selector => {
-        const {name} = selector;
+        const {name, options} = selector;
+        const selections = req.query[name] !== undefined ? req.query[name].split(",") : false;
         // If the user provided a selector in the query, AND if it's actually an option
-        if (req.query[name] && selector.options.map(o => o.option).includes(req.query[name])) {
+        // However, remember that a multi-select with a blank query param is valid
+        const isBlankMulti = selector.type === "multi" && selections.length === 1 && selections[0] === "";
+        if (selections && (selections.every(sel => options.map(o => o.option).includes(sel)) || isBlankMulti)) {
           selector.default = req.query[name];
         }
       });

packages/cms/src/components/ProfileRenderer.jsx

@@ -146,10 +146,16 @@ class ProfileRenderer extends Component {
     const {profile, selectors} = this.state;
     const {id, variables} = profile;
     const {locale, sectionID} = this.props;
-    const {params} = this.context.router;
-
-    if (value instanceof Array && !value.length) delete selectors[name];
-    else selectors[name] = value;
+    const {router} = this.context;
+    const {params, location} = router;
+    const {basename, pathname, query} = location;
+
+    selectors[name] = value;
+
+    const newQuery = {...query, ...selectors};
+    const queryString = Object.entries(newQuery).map(([key, val]) => `${key}=${val}`).join("&");
+    const newPath = `${basename}${pathname}?${queryString}`;
+    if (queryString) router.replace(newPath);
 
     this.setState({loading: true, selectors});
     const payload = {variables};

packages/cms/src/utils/varSwapRecursive.js

@@ -48,7 +48,7 @@ const varSwapRecursive = (sourceObj, formatterFunctions, variables, query = {},
     selectors = obj.allSelectors.map(s => {
       const selector = {};
       // If the option provided in the query is one of the available options for this selector
-      const selections = query[s.name] ? query[s.name].split(",") : false;
+      const selections = query[s.name] !== undefined ? query[s.name].split(",") : false;
       let options = [];
       if (s.dynamic) {
         // Dynamic selectors don't actually have options, only a dynamic field that points to a variable.
@@ -62,7 +62,10 @@ const varSwapRecursive = (sourceObj, formatterFunctions, variables, query = {},
       else {
         options = s.options;
       }
-      if (selections && selections.every(sel => options.map(o => o.option).includes(sel))) {
+      // multi-selects can go down to zero selections, which is a state that has meaning and shouldn't be false-y.
+      // Make sure that this blank state is counted as a "real state" so it doesn't erroneously revert to the defaults
+      const isBlankMulti = selections.length === 1 && selections[0] === "";
+      if (selections && (selections.every(sel => options.map(o => o.option).includes(sel)) || isBlankMulti)) {
         // Save that option inside selector object and return it
         selector[s.name] = query[s.name];
         return selector;