Merge pull request #20 from bedrich-schindler/feature/SUI-BS-1

Filterable event trigger change
visionappscz · Jun 8, 2015 · 32166d4 · 32166d4
2 parents 5b82b7a + 0a33d7d
commit 32166d4
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 16 deletions.
diff --git a/src/js/filterable.js b/src/js/filterable.js
@@ -123,27 +123,36 @@
   };
 
 
-  // FILTERABLE DATA-API
+  // FILTERABLE DAT laA-API
   // ===================
 
-  $(document).on('keyup.sui.filterable.data-api', '[data-toggle=filter]', function() {
+  var lastEventTarget;
+  var lastEventValue;
+
+  $(document).on('keyup.sui.filterable.data-api change.sui.filterable.data-api', '[data-toggle=filter]', function(e) {
     var $filter = $(this).closest('form');
     var filterData = [];
 
-    $filter.find(':input').each(function() {
-      var $this = $(this);
-      if ($this.val() !== '' && $this.val() !== null) {
-        filterData.push({
-          'filter-attrib': $this.data('filter-attrib'),
-          'filter-operator': $this.data('filter-operator'),
-          'filter-value': $this.val()
-        });
-      }
-    });
+    if(lastEventTarget !== e.target || (lastEventTarget === e.target && lastEventValue !== e.target.value)) {
+      $filter.find(':input').each(function() {
+        var $this = $(this);
+        if ($this.val() !== '' && $this.val() !== null) {
+          filterData.push({
+            'filter-attrib': $this.data('filter-attrib'),
+            'filter-operator': $this.data('filter-operator'),
+            'filter-value': $this.val()
+          });
+        }
 
-    Plugin.call($($filter.data('filter-target')), filterData);
+        Plugin.call($($filter.data('filter-target')), filterData);
+      });
+    }
+
+    lastEventTarget = e.target;
+    lastEventValue = e.target.value;
   });
 
+
   $(document).on('click.sui.filterable.data-api', '[data-toggle="filter-reset"]', function() {
     var $form = $(this).closest('form');
     $form[0].reset();

diff --git a/src/js/tests/unit/filterable.js b/src/js/tests/unit/filterable.js
@@ -537,7 +537,7 @@ $(function() {
   ////////////////////////////
   // Data-api related tests //
   ////////////////////////////
-  test('should filter filterables by changing an element in the appropriate filter form', function() {
+  test('should filter filterables by changing an element in the appropriate filter form on key up', function() {
     stop();
 
     // Two forms are defined to ensue that the second one doesnt interfere
@@ -563,6 +563,32 @@ $(function() {
     }, 100);
   });
 
+  test('should filter filterables by changing an element in the appropriate filter form on change', function() {
+    stop();
+
+    // Two forms are defined to ensue that the second one doesnt interfere
+    $('#qunit-fixture').html('<div data-tag="tag1">Tag 1</div>' +
+    '<form data-filter-target="#qunit-fixture div[data-tag=tag1]">' +
+    '<input id="control" type="text" data-toggle="filter" data-filter-attrib="tag" data-filter-operator="intersect" />' +
+    '</form>' +
+    '<div data-tag="tag2">Tag 2</div>' +
+    '<form data-filter-target="#qunit-fixture div[data-tag=tag2]">' +
+    '<input type="text" data-toggle="filter" data-filter-attrib="tag" data-filter-operator="intersect" />' +
+    '</form>');
+
+    $(document).on('filtered.sui.filterable', function() {
+      ok($('#qunit-fixture div[data-tag="tag1"]').is(':hidden'), 'tag 1 was hidden');
+      ok($('#qunit-fixture div[data-tag="tag2"]').is(':visible'), 'tag 2 is visible');
+    });
+
+    $('#control').val('tag2').change();
+
+    setTimeout(function() {
+      $(document).off('filtered.sui.filterable');
+      start();
+    }, 100);
+  });
+
   test('should reset filterables by clicking on reset element', function() {
     stop();
 
@@ -578,7 +604,7 @@ $(function() {
       '<button type="reset" data-toggle="filter-reset" />' +
       '</form>');
 
-    $('#control-2').val('tag1').keyup();
+    $('#control-2').val('tag1').change();
     $(document).on('filtered.sui.filterable', function() {
       $(document).on('resetEnd.sui.filterable', function() {
         ok($('#qunit-fixture div[data-tag="tag1"]').is(':visible'), 'tag 1 was shown again');
@@ -613,7 +639,7 @@ $(function() {
       start();
     });
 
-    $('#control-1').val('').keyup();
+    $('#control-1').val('').change();
   });
 
 });