Fixed #24179 -- Added filtering to selected side of vertical/horizontal filters.

1 files changed, 69 insertions, 3 deletions

diff --git a/js_tests/admin/SelectFilter2.test.js b/js_tests/admin/SelectFilter2.test.js
index 32a30c5889..387bfd669c 100644
--- a/js_tests/admin/SelectFilter2.test.js
+++ b/js_tests/admin/SelectFilter2.test.js
@@ -30,7 +30,7 @@ QUnit.test('filtering available options', function(assert) {
     const search_term = 'r';
     const event = new KeyboardEvent('keyup', {'key': search_term});
     $('#select_input').val(search_term);
-    SelectFilter.filter_key_up(event, 'select');
+    SelectFilter.filter_key_up(event, 'select', '_from');
     setTimeout(() => {
         assert.equal($('#select_from option').length, 2);
         assert.equal($('#select_to option').length, 0);
@@ -40,6 +40,29 @@ QUnit.test('filtering available options', function(assert) {
     });
 });
 
+QUnit.test('filtering selected options', function(assert) {
+    const $ = django.jQuery;
+    $('<form><select multiple id="select"></select></form>').appendTo('#qunit-fixture');
+    $('<option selected value="1" title="Red">Red</option>').appendTo('#select');
+    $('<option selected value="2" title="Blue">Blue</option>').appendTo('#select');
+    $('<option selected value="3" title="Green">Green</option>').appendTo('#select');
+    SelectFilter.init('select', 'items', 0);
+    assert.equal($('#select_from option').length, 0);
+    assert.equal($('#select_to option').length, 3);
+    const done = assert.async();
+    const search_term = 'r';
+    const event = new KeyboardEvent('keyup', {'key': search_term});
+    $('#select_selected_input').val(search_term);
+    SelectFilter.filter_key_up(event, 'select', '_to', '_selected_input');
+    setTimeout(() => {
+        assert.equal($('#select_from option').length, 0);
+        assert.equal($('#select_to option').length, 2);
+        assert.equal($('#select_to option')[0].value, '1');
+        assert.equal($('#select_to option')[1].value, '3');
+        done();
+    });
+});
+
 QUnit.test('filtering available options to nothing', function(assert) {
     const $ = django.jQuery;
     $('<form><select multiple id="select"></select></form>').appendTo('#qunit-fixture');
@@ -53,7 +76,28 @@ QUnit.test('filtering available options to nothing', function(assert) {
     const search_term = 'x';
     const event = new KeyboardEvent('keyup', {'key': search_term});
     $('#select_input').val(search_term);
-    SelectFilter.filter_key_up(event, 'select');
+    SelectFilter.filter_key_up(event, 'select', '_from');
+    setTimeout(() => {
+        assert.equal($('#select_from option').length, 0);
+        assert.equal($('#select_to option').length, 0);
+        done();
+    });
+});
+
+QUnit.test('filtering selected options to nothing', function(assert) {
+    const $ = django.jQuery;
+    $('<form><select multiple id="select"></select></form>').appendTo('#qunit-fixture');
+    $('<option selected value="1" title="Red">Red</option>').appendTo('#select');
+    $('<option selected value="2" title="Blue">Blue</option>').appendTo('#select');
+    $('<option selected value="3" title="Green">Green</option>').appendTo('#select');
+    SelectFilter.init('select', 'items', 0);
+    assert.equal($('#select_from option').length, 0);
+    assert.equal($('#select_to option').length, 3);
+    const done = assert.async();
+    const search_term = 'x';
+    const event = new KeyboardEvent('keyup', {'key': search_term});
+    $('#select_selected_input').val(search_term);
+    SelectFilter.filter_key_up(event, 'select', '_to', '_selected_input');
     setTimeout(() => {
         assert.equal($('#select_from option').length, 0);
         assert.equal($('#select_to option').length, 0);
@@ -74,7 +118,7 @@ QUnit.test('selecting option', function(assert) {
     const done = assert.async();
     $('#select_from')[0].selectedIndex = 0;
     const event = new KeyboardEvent('keydown', {'keyCode': 39, 'charCode': 39});
-    SelectFilter.filter_key_down(event, 'select');
+    SelectFilter.filter_key_down(event, 'select', '_from', '_to');
     setTimeout(() => {
         assert.equal($('#select_from option').length, 2);
         assert.equal($('#select_to option').length, 1);
@@ -82,3 +126,25 @@ QUnit.test('selecting option', function(assert) {
         done();
     });
 });
+
+QUnit.test('deselecting option', function(assert) {
+    const $ = django.jQuery;
+    $('<form><select multiple id="select"></select></form>').appendTo('#qunit-fixture');
+    $('<option selected value="1" title="Red">Red</option>').appendTo('#select');
+    $('<option value="2" title="Blue">Blue</option>').appendTo('#select');
+    $('<option value="3" title="Green">Green</option>').appendTo('#select');
+    SelectFilter.init('select', 'items', 0);
+    assert.equal($('#select_from option').length, 2);
+    assert.equal($('#select_to option').length, 1);
+    assert.equal($('#select_to option')[0].value, '1');
+    // move back to the left
+    const done_left = assert.async();
+    $('#select_to')[0].selectedIndex = 0;
+    const event_left = new KeyboardEvent('keydown', {'keyCode': 37, 'charCode': 37});
+    SelectFilter.filter_key_down(event_left, 'select', '_to', '_from');
+    setTimeout(() => {
+        assert.equal($('#select_from option').length, 3);
+        assert.equal($('#select_to option').length, 0);
+        done_left();
+    });
+});