fix: keep combo-box overlay visible during closing animation (#12115) (#12122)

Co-authored-by: Jouni Koivuviita <jouni@vaadin.com>

Author: vaadin-bot

packages/combo-box/src/vaadin-combo-box-base-mixin.js

@@ -220,6 +220,12 @@ export const ComboBoxBaseMixin = (superClass) =>
         this._overlayOpened = e.detail.value;
       });
 
+      // Finish close lifecycle only after the overlay closing animation completes.
+      overlay.addEventListener('vaadin-overlay-closed', () => {
+        this._scroller.items = [];
+        this._onOverlayClosed();
+      });
+
       this._overlayElement = overlay;
     }
 
@@ -266,7 +272,6 @@ export const ComboBoxBaseMixin = (superClass) =>
         this._onOpened();
       } else if (wasOpened && this._hasDropdownItems) {
         this.close();
-        this._onOverlayClosed();
       }
     }
 
@@ -716,6 +721,10 @@ export const ComboBoxBaseMixin = (superClass) =>
       // Stop this private event from leaking outside.
       e.stopPropagation();
 
+      if (this.hasAttribute('closing')) {
+        return;
+      }
+
       if (e.detail.item instanceof ComboBoxPlaceholder) {
         // Placeholder items should not be selectable.
         return;

packages/combo-box/src/vaadin-combo-box-mixin.js

@@ -165,8 +165,10 @@ export const ComboBoxMixin = (superClass) =>
           getComputedStyle(this).getPropertyValue(`--${this._tagNamePrefix}-overlay-max-height`) || '65vh';
       }
 
+      const isClosing = this.hasAttribute('closing');
+
       this._scroller.setProperties({
-        items: opened ? items : [],
+        items: opened || isClosing ? items : [],
         opened,
         focusedIndex,
         theme,

packages/combo-box/test/interactions.test.js

@@ -9,6 +9,7 @@ import {
   focusout,
   nextRender,
   nextUpdate,
+  oneEvent,
   outsideClick,
   tabKeyDown,
   tap,
@@ -106,6 +107,44 @@ describe('interactions', () => {
       focusout(input);
       expect(input.value).to.be.empty;
     });
+
+    it('should not select item when clicked during closing animation', async () => {
+      const style = document.createElement('style');
+      style.textContent = `
+        :host([closing]) {
+          animation: 200ms closing-animation;
+        }
+
+        :host([closing]) [part='overlay'] {
+          animation: 200ms overlay-closing-animation;
+        }
+
+        @keyframes closing-animation {
+          to {
+            opacity: 1;
+          }
+        }
+
+        @keyframes overlay-closing-animation {
+          to {
+            opacity: 0;
+          }
+        }
+      `;
+      overlay.shadowRoot.appendChild(style);
+
+      const item = getFirstItem(comboBox);
+      comboBox.close();
+      await sendMouseToElement({ type: 'click', element: item });
+
+      expect(comboBox.selectedItem).to.be.null;
+      expect(comboBox.value).to.be.empty;
+
+      await oneEvent(overlay, 'vaadin-overlay-closed');
+
+      expect(comboBox.selectedItem).to.be.null;
+      expect(comboBox.value).to.be.empty;
+    });
   });
 
   describe('focus', () => {

packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-mixin.js

@@ -471,8 +471,10 @@ export const MultiSelectComboBoxMixin = (superClass) =>
           getComputedStyle(this).getPropertyValue(`--${this._tagNamePrefix}-overlay-max-height`) || '65vh';
       }
 
+      const isClosing = this.hasAttribute('closing');
+
       this._scroller.setProperties({
-        items: opened ? items : [],
+        items: opened || isClosing ? items : [],
         opened,
         focusedIndex,
         theme,
@@ -1270,6 +1272,10 @@ export const MultiSelectComboBoxMixin = (superClass) =>
     _overlaySelectedItemChanged(event) {
       event.stopPropagation();
 
+      if (this.hasAttribute('closing')) {
+        return;
+      }
+
       // Do not un-select on click when readonly
       if (this.readonly) {
         return;

packages/multi-select-combo-box/test/selecting-items.test.js

@@ -1,6 +1,6 @@
 import { expect } from '@vaadin/chai-plugins';
-import { resetMouse, sendKeys, sendMouse } from '@vaadin/test-runner-commands';
-import { fixtureSync, keyboardEventFor, nextRender } from '@vaadin/testing-helpers';
+import { resetMouse, sendKeys, sendMouse, sendMouseToElement } from '@vaadin/test-runner-commands';
+import { fixtureSync, keyboardEventFor, nextRender, oneEvent } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import '../src/vaadin-multi-select-combo-box.js';
 import { getAllItems, getDataProvider, getFirstItem } from './helpers.js';
@@ -203,6 +203,44 @@ describe('selecting items', () => {
       expect(comboBox.filter).to.equal('an');
       expect(inputElement.value).to.equal('an');
     });
+
+    it('should not select item when clicked during closing animation', async () => {
+      const overlay = comboBox.$.overlay;
+      const style = document.createElement('style');
+      style.textContent = `
+        :host([closing]) {
+          animation: 200ms closing-animation;
+        }
+
+        :host([closing]) [part='overlay'] {
+          animation: 200ms overlay-closing-animation;
+        }
+
+        @keyframes closing-animation {
+          to {
+            opacity: 1;
+          }
+        }
+
+        @keyframes overlay-closing-animation {
+          to {
+            opacity: 0;
+          }
+        }
+      `;
+      overlay.shadowRoot.appendChild(style);
+
+      await sendKeys({ down: 'ArrowDown' });
+      const item = getFirstItem(comboBox);
+      comboBox.close();
+      await sendMouseToElement({ type: 'click', element: item });
+
+      expect(comboBox.selectedItems).to.deep.equal([]);
+
+      await oneEvent(overlay, 'vaadin-overlay-closed');
+
+      expect(comboBox.selectedItems).to.deep.equal([]);
+    });
   });
 
   describe('dataProvider', () => {