From 98030fa10a7c79cd582dfac62d720bb760bd6edb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= <sissbruecker@vaadin.com>
Date: Thu, 18 Jan 2024 14:50:47 +0200
Subject: [PATCH] fix: avoid clearing filter when pressing clear button on
 mobile (#7091)

Disables the clear button logic from `vaadin-combo-box-mixin`, which clears the filter input when pressing the clear button. Instead, only the MSCB clear button logic is executed, which only clears the selection.
---
 .../src/vaadin-multi-select-combo-box.js              |  3 +++
 packages/multi-select-combo-box/test/basic.test.js    | 11 +++++++++++
 2 files changed, 14 insertions(+)

diff --git a/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box.js b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box.js
index 4e63a4cf54..58300f722f 100644
--- a/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box.js
+++ b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box.js
@@ -1053,6 +1053,9 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
   _onClearButtonTouchend(event) {
     // Cancel the following click and focus events
     event.preventDefault();
+    // Prevent default combo box behavior which can otherwise unnecessarily
+    // clear the input and filter
+    event.stopPropagation();
 
     this.clear();
   }
diff --git a/packages/multi-select-combo-box/test/basic.test.js b/packages/multi-select-combo-box/test/basic.test.js
index 106dcef50a..9a69982108 100644
--- a/packages/multi-select-combo-box/test/basic.test.js
+++ b/packages/multi-select-combo-box/test/basic.test.js
@@ -224,6 +224,17 @@ describe('basic', () => {
       clearButton.dispatchEvent(new CustomEvent('touchend', { cancelable: true }));
       expect(comboBox.selectedItems).to.deep.equal([]);
     });
+
+    it('should not clear filter on clear button touchend', async () => {
+      comboBox.selectedItems = ['apple', 'orange'];
+      inputElement.focus();
+      await sendKeys({ type: 'app' });
+
+      clearButton.dispatchEvent(new CustomEvent('touchend', { cancelable: true, bubbles: true }));
+      expect(inputElement.value).to.equal('app');
+      expect(comboBox.filter).to.equal('app');
+      expect(comboBox.filteredItems).to.deep.equal(['apple']);
+    });
   });
 
   describe('toggle button', () => {