Skip to content

Commit 8adf51a

Browse files
committed
fix(label-group): replace @query with guarded getters for SSR
`@query` calls `this.renderRoot.querySelector()` which crashes during SSR. Replace with getters using optional chaining on renderRoot. Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent e465aa7 commit 8adf51a

1 file changed

Lines changed: 10 additions & 7 deletions

File tree

elements/pf-label-group/pf-label-group.ts

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { LitElement, html, isServer, type TemplateResult } from 'lit';
22
import { customElement } from 'lit/decorators/custom-element.js';
33
import { property } from 'lit/decorators/property.js';
44
import { state } from 'lit/decorators/state.js';
5-
import { query } from 'lit/decorators/query.js';
65
import { queryAssignedNodes } from 'lit/decorators/query-assigned-nodes.js';
76
import { classMap } from 'lit/directives/class-map.js';
87

@@ -89,9 +88,13 @@ export class PfLabelGroup extends LitElement {
8988
/** Label count tracked during SSR via child events. */
9089
@state() private _ssrLabelCount = 0;
9190

92-
@query('#overflow') private _overflowLabel?: PfLabel;
91+
get #overflowLabel(): PfLabel | null {
92+
return this.renderRoot?.querySelector<PfLabel>('#overflow') ?? null;
93+
}
9394

94-
@query('#close-button') private _button?: HTMLButtonElement;
95+
get #closeButton(): HTMLButtonElement | null {
96+
return this.renderRoot?.querySelector<HTMLButtonElement>('#close-button') ?? null;
97+
}
9598

9699
@queryAssignedNodes({ slot: 'category', flatten: true }) private _categorySlotted?: Node[];
97100

@@ -124,8 +127,8 @@ export class PfLabelGroup extends LitElement {
124127
0,
125128
this.open ? this.#labels.length : Math.min(this.#labels.length, this.numLabels),
126129
),
127-
this._overflowLabel,
128-
this._button,
130+
this.#overflowLabel,
131+
this.#closeButton,
129132
].filter(x => !!x),
130133
});
131134

@@ -185,8 +188,8 @@ export class PfLabelGroup extends LitElement {
185188
this.open = !this.open;
186189
await this.updateComplete;
187190
this.labelsChanged();
188-
if (this._overflowLabel) {
189-
this.#tabindex.atFocusedItemIndex = this.#tabindex.items.indexOf(this._overflowLabel);
191+
if (this.#overflowLabel) {
192+
this.#tabindex.atFocusedItemIndex = this.#tabindex.items.indexOf(this.#overflowLabel);
190193
}
191194
this.dispatchEvent(new PfLabelGroupExpandEvent());
192195
}

0 commit comments

Comments
 (0)