Fix Issue #3264284

Closes #2811331

js/dropdown-widget.js

@@ -40,17 +40,24 @@
       $dropdown.addClass('facets-dropdown');
       $dropdown.addClass('js-facets-widget');
       $dropdown.addClass('js-facets-dropdown');
+      if ($ul.hasClass('js-multiple-select')) {
+        $dropdown.attr('multiple', 'multiple');
+      }
 
       var id = $(this).data('drupal-facet-id');
       // Add aria-labelledby attribute to reference label.
       $dropdown.attr('aria-labelledby', "facet_" + id + "_label");
       var default_option_label = settings.facets.dropdown_widget[id]['facet-default-option-label'];
 
-      // Add empty text option first.
+      // Add empty text option first and make it 'disabled'.
       var $default_option = $('<option></option>')
+        .prop('disabled', true)
         .attr('value', '')
         .text(default_option_label);
-      $dropdown.append($default_option);
+      // If default_option_label is set to be blank in facets UI, simply don't render it.
+      if (default_option_label) {
+        $dropdown.append($default_option);
+      }
 
       $ul.prepend('<li class="default-option"><a href="' + window.location.href.split('?')[0] + '">' + Drupal.checkPlain(default_option_label) + '</a></li>');
 
@@ -69,8 +76,12 @@
           $option.attr('selected', 'selected');
           $link.find('.js-facet-deactivate').remove();
         }
-        $option.text(function () {
-          // Add hierarchy indicator in case hierarchy is enabled.
+        // Define parents and determine if current $link is a parent.
+        var $parents = $link.parent('li.facet-item').parents('li.facet-item');
+        var is_parent = $link.parent('li.facet-item--expanded').length > 0;
+
+        $option.html(function() {
+          // Add label-based hierarchy indicator in case hierarchy is enabled.
           var $parents = $link.parent('li.facet-item').parents('li.facet-item');
           var prefix = '';
           for (var i = 0; i < $parents.length; i++) {
@@ -78,15 +89,53 @@
           }
           return prefix + ' ' + $link.text().trim();
         });
+
+        // Add some basic level and parent classing.
+        if (is_parent) {
+          $option.addClass('parent');
+        }
+
+        if (typeof $parents !== 'undefined') {
+          if ($parents.length > 0) {
+            $option.addClass('level-' + $parents.length);
+          }
+        }
+
         $dropdown.append($option);
       });
 
+      $dropdown.data('facetsPreviousValue', $dropdown.val());
+
       // Go to the selected option when it's clicked.
       $dropdown.on('change.facets', function () {
-        var anchor = $($ul).find("[data-drupal-facet-item-id='" + $(this).find(':selected').data('drupalFacetItemId') + "']");
+        var anchor = [];
+        var current = $(this).val();
+        if (typeof current === 'string') {
+          // Single select
+          anchor = $($ul).find("[data-drupal-facet-item-id='" + $(this).find(':selected').data('drupalFacetItemId') + "']");
+        }
+        else {
+          // Multiple select.
+          var previous = $(this).data('facetsPreviousValue');
+          var added = $(current).not(previous).get();
+          var removed = $(previous).not(current).get();
+          var symDiff = added.concat(removed);
+          var filteredSymDiff = symDiff.filter(String);
+          if (0 in filteredSymDiff) {
+            anchor = $($ul).find("[href='" + filteredSymDiff[0] + "']");
+          }
+          else {
+            // If not, at least keep our house clean.
+            // This may only happen if our empty-text value was toggled.
+            $(this).data('facetsPreviousValue', current);
+          }
+        }
         var $linkElement = (anchor.length > 0) ? $(anchor) : $ul.find('.default-option a');
         var url = $linkElement.attr('href');
 
+        var $widget = $(this).closest('.multiselect-native-select');
+        Drupal.facets.disableFacet($widget);
+
         $(this).trigger('facets_filter', [ url ]);
       });
 
@@ -101,4 +150,26 @@
     });
   };
 
+  /**
+   * Disable all facet checkboxes in the facet and apply a 'disabled' class.
+   *
+   * @param {object} $facet
+   *   jQuery object of the facet.
+   */
+  Drupal.facets.disableFacet = function ($facet) {
+    $facet.addClass('facets-disabled');
+    $('input:checkbox', $facet).click(Drupal.facets.preventDefault);
+    $('input:checkbox', $facet).attr('disabled', true);
+  };
+  
+  /**
+   * Event listener for easy prevention of event propagation.
+   *
+   * @param {object} e
+   *   Event.
+   */
+  Drupal.facets.preventDefault = function (e) {
+    e.preventDefault();
+  };
+
 })(jQuery, Drupal, once);