cleanup events

docs/resources/changelog.md

@@ -19,6 +19,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Fixed a bug where `sl-color-picker` could be opened when disabled
 - Fixed a bug in `sl-color-picker` that caused erratic slider behaviors [#388](https://github.com/shoelace-style/shoelace/issues/388) [#389](https://github.com/shoelace-style/shoelace/issues/389)
 - Fixed a bug where `sl-details` wouldn't always render the correct height when open initially [#357](https://github.com/shoelace-style/shoelace/issues/357)
+- Fixed a bug in `sl-tooltip` where events weren't properly cleaned up on disconnect
 - Renamed `components.json` to `metadata.json`
 - Updated to the prerelease versions of LitElement and lit-html
 - Updated to Bootstrap Icons 1.4.1

src/components/tooltip/tooltip.ts

@@ -81,17 +81,28 @@ export default class SlTooltip extends LitElement {
   /** Emitted after the tooltip has hidden and all transitions are complete. */
   @event('sl-after-hide') slAfterHide: EventEmitter<void>;
 
+  connectedCallback() {
+    super.connectedCallback();
+
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleMouseOver = this.handleMouseOver.bind(this);
+    this.handleMouseOut = this.handleMouseOut.bind(this);
+  }
+
   firstUpdated() {
     this.target = this.getTarget();
     this.popover = new Popover(this.target, this.positioner);
     this.syncOptions();
 
-    this.addEventListener('blur', this.handleBlur.bind(this), true);
-    this.addEventListener('click', this.handleClick.bind(this), true);
-    this.addEventListener('focus', this.handleFocus.bind(this), true);
-    this.addEventListener('keydown', this.handleKeyDown.bind(this), true);
-    this.addEventListener('mouseover', this.handleMouseOver.bind(this), true);
-    this.addEventListener('mouseout', this.handleMouseOut.bind(this), true);
+    this.addEventListener('blur', this.handleBlur, true);
+    this.addEventListener('focus', this.handleFocus, true);
+    this.addEventListener('click', this.handleClick);
+    this.addEventListener('keydown', this.handleKeyDown);
+    this.addEventListener('mouseover', this.handleMouseOver);
+    this.addEventListener('mouseout', this.handleMouseOut);
 
     // Show on init if open
     this.positioner.hidden = !this.open;
@@ -104,8 +115,11 @@ export default class SlTooltip extends LitElement {
     super.disconnectedCallback();
     this.popover.destroy();
     this.removeEventListener('blur', this.handleBlur, true);
-    this.removeEventListener('click', this.handleClick, true);
     this.removeEventListener('focus', this.handleFocus, true);
+    this.removeEventListener('click', this.handleClick);
+    this.removeEventListener('keydown', this.handleKeyDown);
+    this.removeEventListener('mouseover', this.handleMouseOver);
+    this.removeEventListener('mouseout', this.handleMouseOut);
   }
 
   /** Shows the tooltip. */