ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(calendar): fix event handler bindings

Browse source
This commit is contained in:
Joren Broekema 2020-12-01 09:09:49 +01:00
parent bde72f1a08
commit 69e38a76b1
2 changed files with 17 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/pink-oranges-study.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/calendar': patch
---
Fix event handler bind so the events are cleaned up properly in disconnectedCallback

35
packages/calendar/src/LionCalendar.js
View file

@ -164,6 +164,10 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
this.__connectedCallbackDone = false; this.__connectedCallbackDone = false;
this.__eventsAdded = false; this.__eventsAdded = false;
this.locale = ''; 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() { static get styles() {
@ -254,13 +258,10 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
this.__contentWrapperElement = /** @type {HTMLButtonElement} */ (this.shadowRoot?.getElementById( this.__contentWrapperElement = /** @type {HTMLButtonElement} */ (this.shadowRoot?.getElementById(
'js-content-wrapper', 'js-content-wrapper',
)); ));
this.__contentWrapperElement.addEventListener('click', this.__clickDateDelegation.bind(this)); this.__contentWrapperElement.addEventListener('click', this.__boundClickDateDelegation);
this.__contentWrapperElement.addEventListener('focus', this.__focusDateDelegation.bind(this)); this.__contentWrapperElement.addEventListener('focus', this.__boundFocusDateDelegation);
this.__contentWrapperElement.addEventListener('blur', this.__blurDateDelegation.bind(this)); this.__contentWrapperElement.addEventListener('blur', this.__boundBlurDateDelegation);
this.__contentWrapperElement.addEventListener( this.__contentWrapperElement.addEventListener('keydown', this.__boundKeyboardNavigationEvent);
'keydown',
this.__keyboardNavigationEvent.bind(this),
);
this.__eventsAdded = true; this.__eventsAdded = true;
} }
} }
@ -268,24 +269,12 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
disconnectedCallback() { disconnectedCallback() {
super.disconnectedCallback(); super.disconnectedCallback();
if (this.__contentWrapperElement) { if (this.__contentWrapperElement) {
this.__contentWrapperElement.removeEventListener( this.__contentWrapperElement.removeEventListener('click', this.__boundClickDateDelegation);
'click', this.__contentWrapperElement.removeEventListener('focus', this.__boundFocusDateDelegation);
this.__clickDateDelegation.bind(this), this.__contentWrapperElement.removeEventListener('blur', this.__boundBlurDateDelegation);
);
this.__contentWrapperElement.removeEventListener(
'focus',
this.__focusDateDelegation.bind(this),
true,
);
this.__contentWrapperElement.removeEventListener(
'blur',
this.__blurDateDelegation.bind(this),
true,
);
this.__contentWrapperElement.removeEventListener( this.__contentWrapperElement.removeEventListener(
'keydown', 'keydown',
this.__keyboardNavigationEvent.bind(this), this.__boundKeyboardNavigationEvent,
); );
this.__eventsAdded = false; this.__eventsAdded = false;