Skip to content

Commit

Permalink
fix(ssr): try to remove event listener calls on server
Browse files Browse the repository at this point in the history
PiperOrigin-RevId: 525534289
  • Loading branch information
Elliott Marquez authored and copybara-github committed Apr 19, 2023
1 parent 5aa1083 commit 5e1fe1c
Show file tree
Hide file tree
Showing 7 changed files with 61 additions and 41 deletions.
6 changes: 4 additions & 2 deletions button/lib/button.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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) => {
Expand Down
18 changes: 10 additions & 8 deletions checkbox/lib/checkbox.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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() {
Expand Down
8 changes: 8 additions & 0 deletions focus/strong-focus.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
* SPDX-License-Identifier: Apache-2.0
*/

import {isServer} from 'lit';

interface StrongFocus {
visible: boolean;
setVisible(visible: boolean): void;
Expand Down Expand Up @@ -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 {
Expand Down
18 changes: 10 additions & 8 deletions radio/lib/radio.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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]() {
Expand Down
18 changes: 10 additions & 8 deletions slider/lib/slider.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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() {
Expand Down
24 changes: 13 additions & 11 deletions switch/lib/switch.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 {
Expand Down
10 changes: 6 additions & 4 deletions textfield/lib/text-field.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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);
}
}

/**
Expand Down

0 comments on commit 5e1fe1c

Please sign in to comment.