diff --git a/components/inputs/input-text.js b/components/inputs/input-text.js index aa2dae28dd..6dde50dde5 100644 --- a/components/inputs/input-text.js +++ b/components/inputs/input-text.js @@ -329,18 +329,21 @@ class InputText extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin( if (this.hasAttribute('aria-label')) { this.labelRequired = false; } + this.addEventListener('mouseover', this._handleMouseEnter); + this.addEventListener('mouseout', this._handleMouseLeave); + this.addEventListener('click', this._handleClick); } disconnectedCallback() { super.disconnectedCallback(); if (this._intersectionObserver) this._intersectionObserver.disconnect(); const container = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input-text-container'); - if (!container) return; - container.removeEventListener('blur', this._handleBlur, true); - container.removeEventListener('focus', this._handleFocus, true); this.removeEventListener('mouseover', this._handleMouseEnter); this.removeEventListener('mouseout', this._handleMouseLeave); this.removeEventListener('click', this._handleClick); + if (!container) return; + container.removeEventListener('blur', this._handleBlur, true); + container.removeEventListener('focus', this._handleFocus, true); } firstUpdated(changedProperties) { @@ -353,9 +356,6 @@ class InputText extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin( if (!container) return; container.addEventListener('blur', this._handleBlur, true); container.addEventListener('focus', this._handleFocus, true); - this.addEventListener('mouseover', this._handleMouseEnter); - this.addEventListener('mouseout', this._handleMouseLeave); - this.addEventListener('click', this._handleClick); // if initially hidden then update layout when it becomes visible if (typeof(IntersectionObserver) === 'function') { @@ -545,7 +545,7 @@ class InputText extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin( } _handleClick(e) { - const input = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input'); + const input = this.shadowRoot?.querySelector('.d2l-input'); if (!input || e.composedPath()[0] !== this) return; input.focus(); } diff --git a/components/inputs/input-textarea.js b/components/inputs/input-textarea.js index 62ab37eb1e..68cfaac36d 100644 --- a/components/inputs/input-textarea.js +++ b/components/inputs/input-textarea.js @@ -88,7 +88,7 @@ class InputTextArea extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMi * @type {string} */ value: { type: String }, - _hovered: { type: Boolean } + _hovered: { state: true } }; } @@ -195,6 +195,9 @@ class InputTextArea extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMi if (this.hasAttribute('aria-label')) { this.labelRequired = false; } + this.addEventListener('mouseover', this._handleMouseEnter); + this.addEventListener('mouseout', this._handleMouseLeave); + this.addEventListener('click', this._handleClick); } disconnectedCallback() { @@ -204,13 +207,6 @@ class InputTextArea extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMi this.removeEventListener('click', this._handleClick); } - firstUpdated(changedProperties) { - super.firstUpdated(changedProperties); - this.addEventListener('mouseover', this._handleMouseEnter); - this.addEventListener('mouseout', this._handleMouseLeave); - this.addEventListener('click', this._handleClick); - } - render() { // convert \n to
for html mirror