Prevent layout items from losing their connection to asigned panel on…

… DOM move.
EventStore · Nov 12, 2024 · 5760869 · 5760869
1 parent 3ad218b
commit 5760869
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 5 deletions.
diff --git a/.changeset/six-ravens-live.md b/.changeset/six-ravens-live.md
@@ -0,0 +1,5 @@
+---
+'@eventstore-ui/layout': patch
+---
+
+Bug fix: Prevent layout items from losing their connection to asigned panel on DOM move.
diff --git a/packages/layout/src/components/buttons/es-layout-button/es-layout-button.tsx b/packages/layout/src/components/buttons/es-layout-button/es-layout-button.tsx
@@ -61,7 +61,8 @@ export class LayoutButton {
 
     private unbindPanelMode?: () => void;
 
-    componentWillLoad() {
+    connectedCallback() {
+        this.unbindPanelMode?.();
         this.unbindPanelMode = bindPanelDetails(this.host, ({ mode }) => {
             this.panelMode = mode;
         });

diff --git a/packages/layout/src/components/buttons/es-layout-link/es-layout-link.tsx b/packages/layout/src/components/buttons/es-layout-link/es-layout-link.tsx
@@ -74,7 +74,8 @@ export class LayoutLink {
 
     private unbindPanelMode?: () => void;
 
-    componentWillLoad() {
+    connectedCallback() {
+        this.unbindPanelMode?.();
         this.unbindPanelMode = bindPanelDetails(this.host, ({ mode }) => {
             this.panelMode = mode;
         });

diff --git a/packages/layout/src/components/es-layout-hr/es-layout-hr.tsx b/packages/layout/src/components/es-layout-hr/es-layout-hr.tsx
@@ -9,14 +9,15 @@ import { bindPanelDetails, type PanelMode } from '../panel';
     styleUrl: 'es-layout-hr.css',
     shadow: true,
 })
-export class PageTitle {
+export class LayoutHR {
     @Element() host!: HTMLEsLayoutSectionElement;
 
     @State() panelMode: PanelMode = 'inline';
 
     private unbindMode?: () => void;
 
-    componentWillLoad() {
+    connectedCallback() {
+        this.unbindMode?.();
         this.unbindMode = bindPanelDetails(this.host, ({ mode }) => {
             this.panelMode = mode;
         });

diff --git a/packages/layout/src/components/es-layout-section/es-layout-section.tsx b/packages/layout/src/components/es-layout-section/es-layout-section.tsx
@@ -46,7 +46,8 @@ export class LayoutSection {
 
     private unbindPanelDetails?: () => void;
 
-    componentWillLoad() {
+    connectedCallback() {
+        this.unbindPanelDetails?.();
         this.unbindPanelDetails = bindPanelDetails(
             this.host,
             (PanelDetails) => {