Replace .bind() with arrow functions in form controller,modal and slo…

…t controller (#1453)

src/internal/form.ts

@@ -81,11 +81,6 @@ export class FormControlController implements ReactiveController {
       assumeInteractionOn: ['sl-input'],
       ...options
     };
-    this.handleFormData = this.handleFormData.bind(this);
-    this.handleFormSubmit = this.handleFormSubmit.bind(this);
-    this.handleFormReset = this.handleFormReset.bind(this);
-    this.reportFormValidity = this.reportFormValidity.bind(this);
-    this.handleInteraction = this.handleInteraction.bind(this);
   }
 
   hostConnected() {
@@ -175,7 +170,7 @@ export class FormControlController implements ReactiveController {
     this.form = undefined;
   }
 
-  private 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);
@@ -193,9 +188,9 @@ export class FormControlController implements ReactiveController {
         event.formData.append(name, (value as string | number | boolean).toString());
       }
     }
-  }
+  };
 
-  private handleFormSubmit(event: Event) {
+  private handleFormSubmit = (event: Event) => {
     const disabled = this.options.disabled(this.host);
     const reportValidity = this.options.reportValidity;
 
@@ -210,15 +205,15 @@ export class FormControlController implements ReactiveController {
       event.preventDefault();
       event.stopImmediatePropagation();
     }
-  }
+  };
 
-  private handleFormReset() {
+  private handleFormReset = () => {
     this.options.setValue(this.host, this.options.defaultValue(this.host));
     this.setUserInteracted(this.host, false);
     interactions.set(this.host, []);
-  }
+  };
 
-  private handleInteraction(event: Event) {
+  private handleInteraction = (event: Event) => {
     const emittedEvents = interactions.get(this.host)!;
 
     if (!emittedEvents.includes(event.type)) {
@@ -229,9 +224,9 @@ export class FormControlController implements ReactiveController {
     if (emittedEvents.length === this.options.assumeInteractionOn.length) {
       this.setUserInteracted(this.host, true);
     }
-  }
+  };
 
-  private reportFormValidity() {
+  private reportFormValidity = () => {
     //
     // Shoelace form controls work hard to act like regular form controls. They support the Constraint Validation API
     // and its associated methods such as setCustomValidity() and reportValidity(). However, the HTMLFormElement also
@@ -259,7 +254,7 @@ export class FormControlController implements ReactiveController {
     }
 
     return true;
-  }
+  };
 
   private setUserInteracted(el: ShoelaceFormControl, hasInteracted: boolean) {
     if (hasInteracted) {

src/internal/modal.ts

@@ -9,9 +9,6 @@ export default class Modal {
 
   constructor(element: HTMLElement) {
     this.element = element;
-    this.handleFocusIn = this.handleFocusIn.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleKeyUp = this.handleKeyUp.bind(this);
   }
 
   activate() {
@@ -50,15 +47,15 @@ export default class Modal {
     }
   }
 
-  handleFocusIn() {
+  private handleFocusIn = () => {
     this.checkFocus();
-  }
+  };
 
   get currentFocusIndex() {
     return getTabbableElements(this.element).findIndex(el => el === this.currentFocus);
   }
 
-  handleKeyDown(event: KeyboardEvent) {
+  handleKeyDown = (event: KeyboardEvent) => {
     if (event.key !== 'Tab') return;
 
     if (event.shiftKey) {
@@ -93,9 +90,9 @@ export default class Modal {
     this.currentFocus?.focus({ preventScroll: true });
 
     setTimeout(() => this.checkFocus());
-  }
+  };
 
-  handleKeyUp() {
+  private handleKeyUp = () => {
     this.tabDirection = 'forward';
-  }
+  };
 }

src/internal/slot.ts

@@ -8,7 +8,6 @@ export class HasSlotController implements ReactiveController {
   constructor(host: ReactiveControllerHost & Element, ...slotNames: string[]) {
     (this.host = host).addController(this);
     this.slotNames = slotNames;
-    this.handleSlotChange = this.handleSlotChange.bind(this);
   }
 
   private hasDefaultSlot() {
@@ -52,13 +51,13 @@ export class HasSlotController implements ReactiveController {
     this.host.shadowRoot!.removeEventListener('slotchange', this.handleSlotChange);
   }
 
-  handleSlotChange(event: Event) {
+  private handleSlotChange = (event: Event) => {
     const slot = event.target as HTMLSlotElement;
 
     if ((this.slotNames.includes('[default]') && !slot.name) || (slot.name && this.slotNames.includes(slot.name))) {
       this.host.requestUpdate();
     }
-  }
+  };
 }
 
 /**