Preserve category selection when using group UI

When using grouped categories on the new report form, the selected
category was being lost when dragging the pin or clicking elsewhere on
the map. This was causing the asset layers to be hidden as well as the
report extra input to be lost.

I'd assumed that cloning an <option> element that was selected and
adding it to the parent <select> would set the value of that <select>
correctly, but that doesn't seem to be the case. Instead, this commit
explicitly sets the <select>'s value after appending a selected <option>
element.

1 files changed, 6 insertions, 3 deletions

diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index c7bbc8cad..1253af6b6 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -459,6 +459,9 @@ $.extend(fixmystreet.set_up, {
 
     var add_option = function(el) {
         $group_select.append($(el).clone());
+        if (el.selected) {
+            $group_select.val(el.value);
+        }
     };
 
     var add_optgroup = function(el) {
@@ -478,11 +481,11 @@ $.extend(fixmystreet.set_up, {
             $sub_select.attr("id", subcategory_id);
             $sub_select.append($empty_option.clone());
             $options.each(function() {
-                var $newopt = $(this).clone();
-                $sub_select.append($newopt);
+                $sub_select.append($(this).clone());
                 // Make sure any preselected value is preserved in the new UI:
-                if ($newopt.attr('selected')) {
+                if (this.selected) {
                     $group_select.val(label);
+                    $sub_select.val(this.value);
                 }
             });
             $sub_select.hide().insertAfter($subcategory_label).change(subcategory_change);