fix: handle tooltip controller closing state properly (#8131)

packages/tooltip/src/vaadin-tooltip-mixin.js

@@ -161,6 +161,11 @@ class TooltipStateController {
       clearTimeout(this.__closeTimeout);
       this.__closeTimeout = null;
     }
+
+    // Remove the tooltip from the closing queue.
+    if (this.isClosing) {
+      closing.delete(this.host);
+    }
   }
 
   /** @private */
@@ -181,7 +186,9 @@ class TooltipStateController {
 
   /** @private */
   __scheduleClose() {
-    if (this._isOpened()) {
+    // Do not schedule closing if it was already scheduled
+    // to avoid overriding reference to the close timeout.
+    if (this._isOpened() && !this.isClosing) {
       closing.add(this.host);
 
       this.__closeTimeout = setTimeout(() => {

packages/tooltip/test/tooltip-timers.common.js

@@ -705,4 +705,37 @@ describe('timers', () => {
       expect(overlays[0].opened).to.be.false;
     });
   });
+
+  describe('state controller', () => {
+    let tooltip, controller;
+
+    beforeEach(async () => {
+      tooltip = fixtureSync(`
+        <vaadin-tooltip text="tooltip 1" hover-delay="2" hide-delay="2" manual></vaadin-tooltip>
+      `);
+      await nextRender();
+      controller = tooltip._stateController;
+    });
+
+    it('should not clear opened state on the tooltip when closing scheduled twice', async () => {
+      controller.open({ hover: true });
+      await aTimeout(2);
+      // Emulate closing on two different events e.g. `mouseleave` and `mouseover`
+      controller.close();
+      controller.close();
+      controller.open({ hover: true });
+      await aTimeout(2);
+      expect(tooltip.opened).to.be.true;
+    });
+
+    it('should not call close() on the controller when open is called', async () => {
+      controller.open({ hover: true });
+      await aTimeout(2);
+      controller.close();
+      const spy = sinon.spy(controller, 'close');
+      controller.open({ hover: true });
+      await aTimeout(2);
+      expect(spy).to.not.be.called;
+    });
+  });
 });