From 4d2de2dd572446bbad5edced1c31c9894d9d11ec Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 2 Jun 2022 08:10:46 -0400
Subject: [PATCH] fixes #775

---
 docs/resources/changelog.md            |  1 +
 src/components/tooltip/tooltip.test.ts | 22 ++++++++++++++++++++++
 src/components/tooltip/tooltip.ts      |  6 +-----
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index b89b97ad6..1b64c8b2e 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -10,6 +10,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 - Fixed focus rings for `<sl-input>`, `<sl-select>`, and `<sl-textarea>` in Safari since they don't use `:focus-visible` [#767](https://github.com/shoelace-style/shoelace/issues/767)
 - Fixed a bug where calling `HTMLFormElement.reportValidity()` would skip Shoelace form controls [#772](https://github.com/shoelace-style/shoelace/issues/772)
+- Fixed a bug that prevented `<sl-tooltip>` from closing when disabled [#775](https://github.com/shoelace-style/shoelace/issues/775)
 - Improved the default icon for `<sl-image-comparer>` so it's more intuitive and removed `grip-vertical` from system icon library
 - Improved RTL styles for many components [#768](https://github.com/shoelace-style/shoelace/pull/768)
 - Revert menu item caching due to regression [#766](https://github.com/shoelace-style/shoelace/issues/766)
diff --git a/src/components/tooltip/tooltip.test.ts b/src/components/tooltip/tooltip.test.ts
index dd0650cac..f4a21b224 100644
--- a/src/components/tooltip/tooltip.test.ts
+++ b/src/components/tooltip/tooltip.test.ts
@@ -112,4 +112,26 @@ describe('<sl-tooltip>', () => {
     expect(afterHideHandler).to.have.been.calledOnce;
     expect(base.hidden).to.be.true;
   });
+
+  it('should hide the tooltip when tooltip is visible and disabled becomes true', async () => {
+    const el = await fixture<SlTooltip>(html`
+      <sl-tooltip content="This is a tooltip" open>
+        <sl-button>Hover Me</sl-button>
+      </sl-tooltip>
+    `);
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
+    const hideHandler = sinon.spy();
+    const afterHideHandler = sinon.spy();
+
+    el.addEventListener('sl-hide', hideHandler);
+    el.addEventListener('sl-after-hide', afterHideHandler);
+    el.disabled = true;
+
+    await waitUntil(() => hideHandler.calledOnce);
+    await waitUntil(() => afterHideHandler.calledOnce);
+
+    expect(hideHandler).to.have.been.calledOnce;
+    expect(afterHideHandler).to.have.been.calledOnce;
+    expect(base.hidden).to.be.true;
+  });
 });
diff --git a/src/components/tooltip/tooltip.ts b/src/components/tooltip/tooltip.ts
index 4c0ab45c1..df06c0693 100644
--- a/src/components/tooltip/tooltip.ts
+++ b/src/components/tooltip/tooltip.ts
@@ -209,11 +209,7 @@ export default class SlTooltip extends LitElement {
 
   @watch('open', { waitUntilFirstUpdate: true })
   async handleOpenChange() {
-    if (this.disabled) {
-      return;
-    }
-
-    if (this.open) {
+    if (this.open && !this.disabled) {
       // Show
       emit(this, 'sl-show');