fix: move ref to the back of declarations (#2243)

With lit ssr blocks in attributes that do not generate attributes seem to cause faulty rendering. E.g. skipping attributes or assigning wrong values.
sbb-design-systems · Nov 30, 2023 · a6ddbc4 · a6ddbc4
1 parent 5377964
commit a6ddbc4
Show file tree

Hide file tree

Showing 11 changed files with 24 additions and 24 deletions.
diff --git a/src/components/autocomplete/autocomplete.ts b/src/components/autocomplete/autocomplete.ts
@@ -533,9 +533,9 @@ export class SbbAutocomplete extends LitElement {
           <div class="sbb-autocomplete__wrapper">
             <div
               class="sbb-autocomplete__options"
-              ${ref((containerRef) => (this._optionContainer = containerRef as HTMLElement))}
               role=${!this._ariaRoleOnHost ? 'listbox' : nothing}
               id=${!this._ariaRoleOnHost ? this._overlayId : nothing}
+              ${ref((containerRef) => (this._optionContainer = containerRef as HTMLElement))}
             >
               <slot></slot>
             </div>

diff --git a/src/components/checkbox/checkbox/checkbox.ts b/src/components/checkbox/checkbox/checkbox.ts
@@ -277,13 +277,6 @@ export class SbbCheckbox extends LitElement {
       <span class="sbb-checkbox-wrapper">
         <label class="sbb-checkbox">
           <input
-            ${ref((checkbox: HTMLInputElement) => {
-              if (checkbox) {
-                this._checkbox = checkbox;
-                // Forward indeterminate state to native input. As it is only a property, we have to set it programmatically.
-                this._checkbox.indeterminate = this.indeterminate;
-              }
-            })}
             type="checkbox"
             aria-hidden="true"
             tabindex=${-1}
@@ -294,6 +287,13 @@ export class SbbCheckbox extends LitElement {
             @input=${() => this._handleInputEvent()}
             @change=${(event) => this._handleChangeEvent(event)}
             @focus=${() => this.focus()}
+            ${ref((checkbox: HTMLInputElement) => {
+              if (checkbox) {
+                this._checkbox = checkbox;
+                // Forward indeterminate state to native input. As it is only a property, we have to set it programmatically.
+                this._checkbox.indeterminate = this.indeterminate;
+              }
+            })}
           />
           <span class="sbb-checkbox__inner">
             <span class="sbb-checkbox__aligner">

diff --git a/src/components/datepicker/datepicker-toggle/datepicker-toggle.ts b/src/components/datepicker/datepicker-toggle/datepicker-toggle.ts
@@ -213,7 +213,6 @@ export class SbbDatepickerToggle extends LitElement {
       >
         <sbb-calendar
           data-now=${this._now()?.valueOf() || nothing}
-          ${ref((calendar: SbbCalendar) => this._assignCalendar(calendar))}
           .min=${this._min}
           .max=${this._max}
           ?wide=${this._datePickerElement?.wide}
@@ -223,6 +222,7 @@ export class SbbDatepickerToggle extends LitElement {
             this._calendarElement.selectedDate = newDate;
             this._datePickerElement.setValueAsDate(newDate);
           }}
+          ${ref((calendar: SbbCalendar) => this._assignCalendar(calendar))}
         ></sbb-calendar>
       </sbb-tooltip>
     `;

diff --git a/src/components/map-container/map-container.ts b/src/components/map-container/map-container.ts
@@ -99,16 +99,16 @@ export class SbbMapContainer extends LitElement {
           ${!this.hideScrollUpButton
             ? html`<sbb-button
                 class="sbb-map-container__sidebar-button"
-                ${ref((ref: HTMLElement) => {
-                  if (ref) {
-                    ref.inert = !this._scrollUpButtonVisible;
-                  }
-                })}
                 variant="tertiary"
                 size="l"
                 icon-name="location-pin-map-small"
                 type="button"
                 @click=${() => this._onScrollButtonClick()}
+                ${ref((ref: HTMLElement) => {
+                  if (ref) {
+                    ref.inert = !this._scrollUpButtonVisible;
+                  }
+                })}
               >
                 ${i18nMapContainerButtonLabel[this._currentLanguage]}
               </sbb-button>`

diff --git a/src/components/menu/menu/menu.ts b/src/components/menu/menu/menu.ts
@@ -393,13 +393,13 @@ export class SbbMenu extends SlotChildObserver(LitElement) {
       <div class="sbb-menu__container">
         <div
           @animationend=${(event: AnimationEvent) => this._onMenuAnimationEnd(event)}
-          ${ref((el) => (this._menu = el as HTMLDivElement))}
           class="sbb-menu"
+          ${ref((el) => (this._menu = el as HTMLDivElement))}
         >
           <div
             @click=${(event: Event) => this._closeOnInteractiveElementClick(event)}
-            ${ref((menuContentRef) => (this._menuContentElement = menuContentRef as HTMLElement))}
             class="sbb-menu__content"
+            ${ref((menuContentRef) => (this._menuContentElement = menuContentRef as HTMLElement))}
           >
             ${this._actions
               ? html`<ul class="sbb-menu-list" aria-label=${this.listAccessibilityLabel ?? nothing}>

diff --git a/src/components/navigation/navigation-section/navigation-section.ts b/src/components/navigation/navigation-section/navigation-section.ts
@@ -385,13 +385,13 @@ export class SbbNavigationSection extends UpdateScheduler(LitElement) {
         ${ref((el) => (this._navigationSectionContainerElement = el as HTMLElement))}
       >
         <nav
+          @animationend=${(event: AnimationEvent) => this._onAnimationEnd(event)}
+          class="sbb-navigation-section"
+          ${spread(accessibilityAttributes)}
           ${ref(
             (navigationSectionRef) =>
               (this._navigationSection = navigationSectionRef as HTMLElement),
           )}
-          @animationend=${(event: AnimationEvent) => this._onAnimationEnd(event)}
-          class="sbb-navigation-section"
-          ${spread(accessibilityAttributes)}
         >
           <div class="sbb-navigation-section__wrapper">
             <div class="sbb-navigation-section__content">

diff --git a/src/components/navigation/navigation/navigation.ts b/src/components/navigation/navigation/navigation.ts
@@ -349,10 +349,10 @@ export class SbbNavigation extends UpdateScheduler(LitElement) {
     return html`
       <div class="sbb-navigation__container">
         <div
-          ${ref((navigationRef) => (this._navigation = navigationRef as HTMLDivElement))}
           id="sbb-navigation-overlay"
           @animationend=${(event: AnimationEvent) => this._onAnimationEnd(event)}
           class="sbb-navigation"
+          ${ref((navigationRef) => (this._navigation = navigationRef as HTMLDivElement))}
         >
           <div class="sbb-navigation__header">${closeButton}</div>
           <div class="sbb-navigation__wrapper">

diff --git a/src/components/notification/notification.ts b/src/components/notification/notification.ts
@@ -200,9 +200,9 @@ export class SbbNotification extends LitElement {
     return html`
       <div
         class="sbb-notification__wrapper"
-        ${ref((el) => (this._notificationElement = el as HTMLElement))}
         @transitionend=${(event: TransitionEvent) => this._onNotificationTransitionEnd(event)}
         @animationend=${(event: AnimationEvent) => this._onNotificationAnimationEnd(event)}
+        ${ref((el) => (this._notificationElement = el as HTMLElement))}
       >
         <div class="sbb-notification">
           <sbb-icon

diff --git a/src/components/select/select.ts b/src/components/select/select.ts
@@ -653,9 +653,9 @@ export class SbbSelect extends LitElement {
         aria-required=${this.required.toString()}
         aria-controls=${this._overlayId}
         aria-owns=${this._overlayId}
-        ${ref((ref) => (this._triggerElement = ref as HTMLElement))}
         @keydown=${this._onKeyDown}
         @click=${this._toggleOpening}
+        ${ref((ref) => (this._triggerElement = ref as HTMLElement))}
       >
         ${this._displayValue ? html`${this._displayValue}` : html`<span>${this.placeholder}</span>`}
       </div>

diff --git a/src/components/selection-panel/selection-panel.ts b/src/components/selection-panel/selection-panel.ts
@@ -208,13 +208,13 @@ export class SbbSelectionPanel extends LitElement {
           ? html` <div
               class="sbb-selection-panel__content--wrapper"
               ?data-expanded=${this._checked || this.forceOpen}
+              @transitionend=${(event: TransitionEvent) => this._onTransitionEnd(event)}
               ${ref((el: HTMLElement) => {
                 this._contentElement = el;
                 if (this._contentElement) {
                   this._contentElement.inert = !this._checked && !this.forceOpen;
                 }
               })}
-              @transitionend=${(event: TransitionEvent) => this._onTransitionEnd(event)}
             >
               <div class="sbb-selection-panel__content">
                 <sbb-divider></sbb-divider>

diff --git a/src/components/tooltip/tooltip/tooltip.ts b/src/components/tooltip/tooltip/tooltip.ts
@@ -472,8 +472,8 @@ export class SbbTooltip extends LitElement {
       <div class="sbb-tooltip__container">
         <div
           @animationend=${(event: AnimationEvent) => this._onTooltipAnimationEnd(event)}
-          ${ref((el) => (this._overlay = el as HTMLDivElement))}
           class="sbb-tooltip"
+          ${ref((el) => (this._overlay = el as HTMLDivElement))}
         >
           <div
             @click=${(event: Event) => this._closeOnSbbTooltipCloseClick(event)}