From f2d527ea97fdfc05934792ac3906bb1a45e51e6f Mon Sep 17 00:00:00 2001
From: Kevin Brown <kevin-brown@users.noreply.github.com>
Date: Sun, 21 Jul 2019 13:04:51 -0400
Subject: [PATCH] Do not propagate click when search box is not empty (#5580)

This fixes a long-standing bug where if you tried to click in the
search box for a multiple select while there was text in it, the
dropdown would close and the text would be cleared. This caused
many unexpected issues, because it meant that you could only use
your keyboard to edit text within the search box.

This will still clear out the search field if you click within the
area of the selection which is not the search field. I'm not sure
if that is also unexpected behaviour, so for now I am going to
maintain it.

Fixes #3517
Fixes #3808
Fixes #5491
Closes #5551
---
 src/js/select2/selection/search.js |  6 +++
 tests/selection/search-tests.js    | 86 ++++++++++++++++++++++++++++++
 2 files changed, 92 insertions(+)

diff --git a/src/js/select2/selection/search.js b/src/js/select2/selection/search.js
index 353c5621..78997d3e 100644
--- a/src/js/select2/selection/search.js
+++ b/src/js/select2/selection/search.js
@@ -90,6 +90,12 @@ define([
       }
     });
 
+    this.$selection.on('click', '.select2-search--inline', function (evt) {
+      if (self.$search.val()) {
+        evt.stopPropagation();
+      }
+    });
+
     // Try to detect the IE version should the `documentMode` property that
     // is stored on the document. This is only implemented in IE and is
     // slightly cleaner than doing a user agent check.
diff --git a/tests/selection/search-tests.js b/tests/selection/search-tests.js
index 43345d72..439b7ed6 100644
--- a/tests/selection/search-tests.js
+++ b/tests/selection/search-tests.js
@@ -188,4 +188,90 @@ test('the focus event shifts the focus', function (assert) {
     $search[0],
     'The search did not have focus originally'
   );
+});
+
+test('search box without text should propagate click', function (assert) {
+  assert.expect(1);
+
+  var $container = $('#qunit-fixture .event-container');
+  var container = new MockContainer();
+
+  var CustomSelection = Utils.Decorate(MultipleSelection, InlineSearch);
+
+  var $element = $('#qunit-fixture .multiple');
+  var selection = new CustomSelection($element, options);
+
+  var $selection = selection.render();
+  selection.bind(container, $container);
+
+  // Update the selection so the search is rendered
+  selection.update([]);
+
+  // Make it visible so the browser can place focus on the search
+  $container.append($selection);
+
+  $selection.on('click', function () {
+    assert.ok(true, 'The click event should not have been trapped');
+  });
+
+  var $search = $selection.find('input');
+  $search.trigger('click');
+});
+
+test('search box with text should not propagate click', function (assert) {
+  assert.expect(0);
+
+  var $container = $('#qunit-fixture .event-container');
+  var container = new MockContainer();
+
+  var CustomSelection = Utils.Decorate(MultipleSelection, InlineSearch);
+
+  var $element = $('#qunit-fixture .multiple');
+  var selection = new CustomSelection($element, options);
+
+  var $selection = selection.render();
+  selection.bind(container, $container);
+
+  // Update the selection so the search is rendered
+  selection.update([]);
+
+  // Make it visible so the browser can place focus on the search
+  $container.append($selection);
+
+  $selection.on('click', function () {
+    assert.ok(false, 'The click event should have been trapped');
+  });
+
+  var $search = $selection.find('input');
+  $search.val('test');
+  $search.trigger('click');
+});
+
+test('search box with text should not close dropdown', function (assert) {
+  assert.expect(0);
+
+  var $container = $('#qunit-fixture .event-container');
+  var container = new MockContainer();
+
+  var CustomSelection = Utils.Decorate(MultipleSelection, InlineSearch);
+
+  var $element = $('#qunit-fixture .multiple');
+  var selection = new CustomSelection($element, options);
+
+  var $selection = selection.render();
+  selection.bind(container, $container);
+
+  // Update the selection so the search is rendered
+  selection.update([]);
+
+  // Make it visible so the browser can place focus on the search
+  $container.append($selection);
+
+  container.on('close', function () {
+    assert.ok(false, 'The dropdown should not have closed');
+  });
+
+  var $search = $selection.find('input');
+  $search.val('test');
+  $search.trigger('click');
 });
\ No newline at end of file