From 69e38a76b1c92469a8b0483daee664bb18f819f1 Mon Sep 17 00:00:00 2001
From: Joren Broekema <joren.broekema@ing.com>
Date: Tue, 1 Dec 2020 09:09:49 +0100
Subject: [PATCH] fix(calendar): fix event handler bindings

---
 .changeset/pink-oranges-study.md      |  5 ++++
 packages/calendar/src/LionCalendar.js | 35 +++++++++------------------
 2 files changed, 17 insertions(+), 23 deletions(-)
 create mode 100644 .changeset/pink-oranges-study.md

diff --git a/.changeset/pink-oranges-study.md b/.changeset/pink-oranges-study.md
new file mode 100644
index 000000000..32f043b74
--- /dev/null
+++ b/.changeset/pink-oranges-study.md
@@ -0,0 +1,5 @@
+---
+'@lion/calendar': patch
+---
+
+Fix event handler bind so the events are cleaned up properly in disconnectedCallback
diff --git a/packages/calendar/src/LionCalendar.js b/packages/calendar/src/LionCalendar.js
index cec3d4cfb..77cceff3e 100644
--- a/packages/calendar/src/LionCalendar.js
+++ b/packages/calendar/src/LionCalendar.js
@@ -164,6 +164,10 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
     this.__connectedCallbackDone = false;
     this.__eventsAdded = false;
     this.locale = '';
+    this.__boundKeyboardNavigationEvent = this.__keyboardNavigationEvent.bind(this);
+    this.__boundClickDateDelegation = this.__clickDateDelegation.bind(this);
+    this.__boundFocusDateDelegation = this.__focusDateDelegation.bind(this);
+    this.__boundBlurDateDelegation = this.__focusDateDelegation.bind(this);
   }
 
   static get styles() {
@@ -254,13 +258,10 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
       this.__contentWrapperElement = /** @type {HTMLButtonElement} */ (this.shadowRoot?.getElementById(
         'js-content-wrapper',
       ));
-      this.__contentWrapperElement.addEventListener('click', this.__clickDateDelegation.bind(this));
-      this.__contentWrapperElement.addEventListener('focus', this.__focusDateDelegation.bind(this));
-      this.__contentWrapperElement.addEventListener('blur', this.__blurDateDelegation.bind(this));
-      this.__contentWrapperElement.addEventListener(
-        'keydown',
-        this.__keyboardNavigationEvent.bind(this),
-      );
+      this.__contentWrapperElement.addEventListener('click', this.__boundClickDateDelegation);
+      this.__contentWrapperElement.addEventListener('focus', this.__boundFocusDateDelegation);
+      this.__contentWrapperElement.addEventListener('blur', this.__boundBlurDateDelegation);
+      this.__contentWrapperElement.addEventListener('keydown', this.__boundKeyboardNavigationEvent);
       this.__eventsAdded = true;
     }
   }
@@ -268,24 +269,12 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
   disconnectedCallback() {
     super.disconnectedCallback();
     if (this.__contentWrapperElement) {
-      this.__contentWrapperElement.removeEventListener(
-        'click',
-        this.__clickDateDelegation.bind(this),
-      );
-      this.__contentWrapperElement.removeEventListener(
-        'focus',
-        this.__focusDateDelegation.bind(this),
-        true,
-      );
-      this.__contentWrapperElement.removeEventListener(
-        'blur',
-        this.__blurDateDelegation.bind(this),
-        true,
-      );
-
+      this.__contentWrapperElement.removeEventListener('click', this.__boundClickDateDelegation);
+      this.__contentWrapperElement.removeEventListener('focus', this.__boundFocusDateDelegation);
+      this.__contentWrapperElement.removeEventListener('blur', this.__boundBlurDateDelegation);
       this.__contentWrapperElement.removeEventListener(
         'keydown',
-        this.__keyboardNavigationEvent.bind(this),
+        this.__boundKeyboardNavigationEvent,
       );
 
       this.__eventsAdded = false;