diff --git a/button/lib/button.ts b/button/lib/button.ts index 88756e33b2..916b569de0 100644 --- a/button/lib/button.ts +++ b/button/lib/button.ts @@ -10,7 +10,7 @@ import '../../focus/focus-ring.js'; import '../../ripple/ripple.js'; -import {html, LitElement, nothing, TemplateResult} from 'lit'; +import {html, isServer, LitElement, nothing, TemplateResult} from 'lit'; import {property, query, queryAssignedElements, queryAsync, state} from 'lit/decorators.js'; import {ClassInfo, classMap} from 'lit/directives/class-map.js'; import {when} from 'lit/directives/when.js'; @@ -101,7 +101,9 @@ export abstract class Button extends LitElement implements ButtonState { constructor() { super(); - this.addEventListener('click', this.handleActivationClick); + if (!isServer) { + this.addEventListener('click', this.handleActivationClick); + } } private readonly handleActivationClick = (event: MouseEvent) => { diff --git a/checkbox/lib/checkbox.ts b/checkbox/lib/checkbox.ts index d8227914be..96053fd646 100644 --- a/checkbox/lib/checkbox.ts +++ b/checkbox/lib/checkbox.ts @@ -7,7 +7,7 @@ import '../../focus/focus-ring.js'; import '../../ripple/ripple.js'; -import {html, LitElement, nothing, PropertyValues, TemplateResult} from 'lit'; +import {html, isServer, LitElement, nothing, PropertyValues, TemplateResult} from 'lit'; import {property, query, queryAsync, state} from 'lit/decorators.js'; import {classMap} from 'lit/directives/class-map.js'; import {when} from 'lit/directives/when.js'; @@ -85,13 +85,15 @@ export class Checkbox extends LitElement { constructor() { super(); this.addController(new FormController(this)); - this.addEventListener('click', (event: MouseEvent) => { - if (!isActivationClick(event)) { - return; - } - this.focus(); - dispatchActivationClick(this.input!); - }); + if (!isServer) { + this.addEventListener('click', (event: MouseEvent) => { + if (!isActivationClick(event)) { + return; + } + this.focus(); + dispatchActivationClick(this.input!); + }); + } } override focus() { diff --git a/focus/strong-focus.ts b/focus/strong-focus.ts index 8bdba8479f..2fc143ed43 100644 --- a/focus/strong-focus.ts +++ b/focus/strong-focus.ts @@ -4,6 +4,8 @@ * SPDX-License-Identifier: Apache-2.0 */ +import {isServer} from 'lit'; + interface StrongFocus { visible: boolean; setVisible(visible: boolean): void; @@ -54,6 +56,12 @@ export function keydownHandler(e: KeyboardEvent) { */ export function setup(focusGlobal: StrongFocus, enableKeydownHandler = false) { focusObject = focusGlobal; + + // Server doesn't have addEventListener shimmed + if (isServer) { + return; + } + if (enableKeydownHandler) { window.addEventListener('keydown', keydownHandler); } else { diff --git a/radio/lib/radio.ts b/radio/lib/radio.ts index 9233cd916d..ecef4529c6 100644 --- a/radio/lib/radio.ts +++ b/radio/lib/radio.ts @@ -7,7 +7,7 @@ import '../../focus/focus-ring.js'; import '../../ripple/ripple.js'; -import {html, LitElement, nothing, TemplateResult} from 'lit'; +import {html, isServer, LitElement, nothing, TemplateResult} from 'lit'; import {property, query, queryAsync, state} from 'lit/decorators.js'; import {when} from 'lit/directives/when.js'; @@ -90,13 +90,15 @@ export class Radio extends LitElement { super(); this.addController(new FormController(this)); this.addController(this.selectionController); - this.addEventListener('click', (event: Event) => { - if (!isActivationClick(event)) { - return; - } - this.focus(); - dispatchActivationClick(this.input!); - }); + if (!isServer) { + this.addEventListener('click', (event: Event) => { + if (!isActivationClick(event)) { + return; + } + this.focus(); + dispatchActivationClick(this.input!); + }); + } } [getFormValue]() { diff --git a/slider/lib/slider.ts b/slider/lib/slider.ts index 2a1d7328e5..b03186c89d 100644 --- a/slider/lib/slider.ts +++ b/slider/lib/slider.ts @@ -8,7 +8,7 @@ import '../../elevation/elevation.js'; import '../../focus/focus-ring.js'; import '../../ripple/ripple.js'; -import {html, LitElement, nothing, PropertyValues} from 'lit'; +import {html, isServer, LitElement, nothing, PropertyValues} from 'lit'; import {property, query, queryAsync, state} from 'lit/decorators.js'; import {classMap} from 'lit/directives/class-map.js'; import {styleMap} from 'lit/directives/style-map.js'; @@ -210,13 +210,15 @@ export class Slider extends LitElement { constructor() { super(); this.addController(new FormController(this)); - this.addEventListener('click', (event: MouseEvent) => { - if (!isActivationClick(event)) { - return; - } - this.focus(); - dispatchActivationClick(this.inputB); - }); + if (!isServer) { + this.addEventListener('click', (event: MouseEvent) => { + if (!isActivationClick(event)) { + return; + } + this.focus(); + dispatchActivationClick(this.inputB); + }); + } } override focus() { diff --git a/switch/lib/switch.ts b/switch/lib/switch.ts index 4a2f6a61e5..cf234c7ca9 100644 --- a/switch/lib/switch.ts +++ b/switch/lib/switch.ts @@ -9,7 +9,7 @@ import '../../focus/focus-ring.js'; import '../../ripple/ripple.js'; -import {html, LitElement, TemplateResult} from 'lit'; +import {html, isServer, LitElement, TemplateResult} from 'lit'; import {eventOptions, property, query, queryAsync, state} from 'lit/decorators.js'; import {ClassInfo, classMap} from 'lit/directives/class-map.js'; import {ifDefined} from 'lit/directives/if-defined.js'; @@ -101,16 +101,18 @@ export class Switch extends LitElement { constructor() { super(); this.addController(new FormController(this)); - this.addEventListener('click', (event: MouseEvent) => { - if (!isActivationClick(event)) { - return; - } - this.button?.focus(); - if (this.button != null) { - // this triggers the click behavior, and the ripple - dispatchActivationClick(this.button); - } - }); + if (!isServer) { + this.addEventListener('click', (event: MouseEvent) => { + if (!isActivationClick(event)) { + return; + } + this.button?.focus(); + if (this.button != null) { + // this triggers the click behavior, and the ripple + dispatchActivationClick(this.button); + } + }); + } } protected override render(): TemplateResult { diff --git a/textfield/lib/text-field.ts b/textfield/lib/text-field.ts index 37609d4df9..ea0bbf963d 100644 --- a/textfield/lib/text-field.ts +++ b/textfield/lib/text-field.ts @@ -4,7 +4,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import {html, LitElement, nothing, PropertyValues} from 'lit'; +import {html, isServer, LitElement, nothing, PropertyValues} from 'lit'; import {property, query, queryAssignedElements, state} from 'lit/decorators.js'; import {classMap} from 'lit/directives/class-map.js'; import {live} from 'lit/directives/live.js'; @@ -327,9 +327,11 @@ export abstract class TextField extends LitElement { constructor() { super(); this.addController(new FormController(this)); - this.addEventListener('click', this.focus); - this.addEventListener('focusin', this.handleFocusin); - this.addEventListener('focusout', this.handleFocusout); + if (!isServer) { + this.addEventListener('click', this.focus); + this.addEventListener('focusin', this.handleFocusin); + this.addEventListener('focusout', this.handleFocusout); + } } /**