Remove the need to bind member methods in the connectedCallback (#1081)

* Remove the need to bind member methods in the connectedCallback

* Remove console.log

src/components/animation/animation.ts

@@ -91,8 +91,6 @@ export default class SlAnimation extends ShoelaceElement {
   connectedCallback() {
     super.connectedCallback();
     this.createAnimation();
-    this.handleAnimationCancel = this.handleAnimationCancel.bind(this);
-    this.handleAnimationFinish = this.handleAnimationFinish.bind(this);
   }
 
   disconnectedCallback() {
@@ -118,17 +116,17 @@ export default class SlAnimation extends ShoelaceElement {
     this.createAnimation();
   }
 
-  handleAnimationFinish() {
+  private handleAnimationFinish = () => {
     this.play = false;
     this.hasStarted = false;
     this.emit('sl-finish');
-  }
+  };
 
-  handleAnimationCancel() {
+  private handleAnimationCancel = () => {
     this.play = false;
     this.hasStarted = false;
     this.emit('sl-cancel');
-  }
+  };
 
   @watch('play')
   handlePlayChange() {

src/components/dialog/dialog.ts

@@ -93,7 +93,6 @@ export default class SlDialog extends ShoelaceElement {
 
   connectedCallback() {
     super.connectedCallback();
-    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
     this.modal = new Modal(this);
   }
 
@@ -155,12 +154,12 @@ export default class SlDialog extends ShoelaceElement {
     document.removeEventListener('keydown', this.handleDocumentKeyDown);
   }
 
-  handleDocumentKeyDown(event: KeyboardEvent) {
+  private handleDocumentKeyDown = (event: KeyboardEvent) => {
     if (this.open && event.key === 'Escape') {
       event.stopPropagation();
       this.requestClose('keyboard');
     }
-  }
+  };
 
   @watch('open', { waitUntilFirstUpdate: true })
   async handleOpenChange() {

src/components/drawer/drawer.ts

@@ -110,7 +110,6 @@ export default class SlDrawer extends ShoelaceElement {
 
   connectedCallback() {
     super.connectedCallback();
-    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
     this.modal = new Modal(this);
   }
 
@@ -175,12 +174,12 @@ export default class SlDrawer extends ShoelaceElement {
     document.removeEventListener('keydown', this.handleDocumentKeyDown);
   }
 
-  handleDocumentKeyDown(event: KeyboardEvent) {
+  private handleDocumentKeyDown = (event: KeyboardEvent) => {
     if (this.open && !this.contained && event.key === 'Escape') {
       event.stopPropagation();
       this.requestClose('keyboard');
     }
-  }
+  };
 
   @watch('open', { waitUntilFirstUpdate: true })
   async handleOpenChange() {

src/components/dropdown/dropdown.ts

@@ -104,11 +104,6 @@ export default class SlDropdown extends ShoelaceElement {
 
   connectedCallback() {
     super.connectedCallback();
-    this.handleMenuItemActivate = this.handleMenuItemActivate.bind(this);
-    this.handlePanelSelect = this.handlePanelSelect.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
-    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
 
     if (!this.containingElement) {
       this.containingElement = this;
@@ -144,7 +139,7 @@ export default class SlDropdown extends ShoelaceElement {
       | undefined;
   }
 
-  handleKeyDown(event: KeyboardEvent) {
+  private handleKeyDown = (event: KeyboardEvent) => {
     // Close when escape is pressed inside an open dropdown. We need to listen on the panel itself and stop propagation
     // in case any ancestors are also listening for this key.
     if (this.open && event.key === 'Escape') {
@@ -152,9 +147,9 @@ export default class SlDropdown extends ShoelaceElement {
       this.hide();
       this.focusOnTrigger();
     }
-  }
+  };
 
-  handleDocumentKeyDown(event: KeyboardEvent) {
+  private handleDocumentKeyDown = (event: KeyboardEvent) => {
     // Handle tabbing
     if (event.key === 'Tab') {
       // Tabbing within an open menu should close the dropdown and refocus the trigger
@@ -183,22 +178,22 @@ export default class SlDropdown extends ShoelaceElement {
         }
       });
     }
-  }
+  };
 
-  handleDocumentMouseDown(event: MouseEvent) {
+  private handleDocumentMouseDown = (event: MouseEvent) => {
     // Close when clicking outside of the containing element
     const path = event.composedPath();
     if (this.containingElement && !path.includes(this.containingElement)) {
       this.hide();
     }
-  }
+  };
 
-  handleMenuItemActivate(event: CustomEvent) {
+  private handleMenuItemActivate = (event: CustomEvent) => {
     const item = event.target as SlMenuItem;
     scrollIntoView(item, this.panel);
-  }
+  };
 
-  handlePanelSelect(event: CustomEvent) {
+  private handlePanelSelect = (event: CustomEvent) => {
     const target = event.target as HTMLElement;
 
     // Hide the dropdown when a menu item is selected
@@ -206,7 +201,7 @@ export default class SlDropdown extends ShoelaceElement {
       this.hide();
       this.focusOnTrigger();
     }
-  }
+  };
 
   handleTriggerClick() {
     if (this.open) {

src/components/mutation-observer/mutation-observer.ts

@@ -44,7 +44,6 @@ export default class SlMutationObserver extends ShoelaceElement {
 
   connectedCallback() {
     super.connectedCallback();
-    this.handleMutation = this.handleMutation.bind(this);
 
     this.mutationObserver = new MutationObserver(this.handleMutation);
 
@@ -76,11 +75,11 @@ export default class SlMutationObserver extends ShoelaceElement {
     this.startObserver();
   }
 
-  handleMutation(mutationList: MutationRecord[]) {
+  private handleMutation = (mutationList: MutationRecord[]) => {
     this.emit('sl-mutation', {
       detail: { mutationList }
     });
-  }
+  };
 
   startObserver() {
     const observeAttributes = typeof this.attr === 'string' && this.attr.length > 0;

src/components/tooltip/tooltip.ts

@@ -99,14 +99,6 @@ export default class SlTooltip extends ShoelaceElement {
   @property({ type: Boolean }) hoist = false;
 
   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);
-
     this.updateComplete.then(() => {
       this.addEventListener('blur', this.handleBlur, true);
       this.addEventListener('focus', this.handleFocus, true);
@@ -170,13 +162,13 @@ export default class SlTooltip extends ShoelaceElement {
     return target as HTMLElement;
   }
 
-  handleBlur() {
+  private handleBlur = () => {
     if (this.hasTrigger('focus')) {
       this.hide();
     }
-  }
+  };
 
-  handleClick() {
+  private handleClick = () => {
     if (this.hasTrigger('click')) {
       if (this.open) {
         this.hide();
@@ -184,37 +176,37 @@ export default class SlTooltip extends ShoelaceElement {
         this.show();
       }
     }
-  }
+  };
 
-  handleFocus() {
+  private handleFocus = () => {
     if (this.hasTrigger('focus')) {
       this.show();
     }
-  }
+  };
 
-  handleKeyDown(event: KeyboardEvent) {
+  private handleKeyDown = (event: KeyboardEvent) => {
     // Pressing escape when the target element has focus should dismiss the tooltip
     if (this.open && event.key === 'Escape') {
       event.stopPropagation();
       this.hide();
     }
-  }
+  };
 
-  handleMouseOver() {
+  private handleMouseOver = () => {
     if (this.hasTrigger('hover')) {
       const delay = parseDuration(getComputedStyle(this).getPropertyValue('--show-delay'));
       clearTimeout(this.hoverTimeout);
       this.hoverTimeout = window.setTimeout(() => this.show(), delay);
     }
-  }
+  };
 
-  handleMouseOut() {
+  private handleMouseOut = () => {
     if (this.hasTrigger('hover')) {
       const delay = parseDuration(getComputedStyle(this).getPropertyValue('--hide-delay'));
       clearTimeout(this.hoverTimeout);
       this.hoverTimeout = window.setTimeout(() => this.hide(), delay);
     }
-  }
+  };
 
   @watch('open', { waitUntilFirstUpdate: true })
   async handleOpenChange() {

src/internal/form.ts

@@ -142,7 +142,7 @@ export class FormSubmitController implements ReactiveController {
     }
   }
 
-  handleFormData(event: FormDataEvent) {
+  private handleFormData = (event: FormDataEvent) => {
     const disabled = this.options.disabled(this.host);
     const name = this.options.name(this.host);
     const value = this.options.value(this.host);
@@ -160,9 +160,9 @@ export class FormSubmitController implements ReactiveController {
         event.formData.append(name, (value as string | number | boolean).toString());
       }
     }
-  }
+  };
 
-  handleFormSubmit(event: Event) {
+  private handleFormSubmit = (event: Event) => {
     const disabled = this.options.disabled(this.host);
     const reportValidity = this.options.reportValidity;
 
@@ -177,17 +177,17 @@ export class FormSubmitController implements ReactiveController {
       event.preventDefault();
       event.stopImmediatePropagation();
     }
-  }
+  };
 
-  handleFormReset() {
+  private handleFormReset = () => {
     this.options.setValue(this.host, this.options.defaultValue(this.host));
     this.setUserInteracted(this.host, false);
-  }
+  };
 
-  async handleUserInput() {
+  private handleUserInput = async () => {
     await this.host.updateComplete;
     this.setUserInteracted(this.host, true);
-  }
+  };
 
   reportFormValidity() {
     //