From a6ddbc406868987773e3c2ea46341a600c03f221 Mon Sep 17 00:00:00 2001
From: Jeri Peier <jeremias.peier@sbb.ch>
Date: Thu, 30 Nov 2023 18:17:13 +0100
Subject: [PATCH] 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.
---
 src/components/autocomplete/autocomplete.ts        |  2 +-
 src/components/checkbox/checkbox/checkbox.ts       | 14 +++++++-------
 .../datepicker-toggle/datepicker-toggle.ts         |  2 +-
 src/components/map-container/map-container.ts      | 10 +++++-----
 src/components/menu/menu/menu.ts                   |  4 ++--
 .../navigation-section/navigation-section.ts       |  6 +++---
 src/components/navigation/navigation/navigation.ts |  2 +-
 src/components/notification/notification.ts        |  2 +-
 src/components/select/select.ts                    |  2 +-
 src/components/selection-panel/selection-panel.ts  |  2 +-
 src/components/tooltip/tooltip/tooltip.ts          |  2 +-
 11 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/components/autocomplete/autocomplete.ts b/src/components/autocomplete/autocomplete.ts
index f5832419be..643973b8ca 100644
--- 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
index 1ff3483325..6db87350de 100644
--- 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
index 01d53c3945..34dfbdbd44 100644
--- 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
index 136e96880a..d66a9b1cde 100644
--- 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
index 71763f8908..6c3e60018f 100644
--- 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
index 9fc2c47382..ad663ab5b4 100644
--- 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
index 856ca864d6..00d642e73e 100644
--- 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
index b3e6a74107..b6c73f35d1 100644
--- 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
index 1ef93aaa04..2f9a4a7c3f 100644
--- 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
index e13b9db8bc..b21ff89e8b 100644
--- 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
index 518e9df279..ccca68532f 100644
--- 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)}