From 18d5bb0203c682be770c430d5abe8d728affedab Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Mon, 30 Sep 2024 15:29:05 -0700
Subject: [PATCH 1/3] fix(inline-editable): properly handle slotted elements
 #6059

---
 .../inline-editable/inline-editable.tsx       | 35 ++++++++++---------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/packages/calcite-components/src/components/inline-editable/inline-editable.tsx b/packages/calcite-components/src/components/inline-editable/inline-editable.tsx
index 77aa0441ea5..841b12444dc 100644
--- a/packages/calcite-components/src/components/inline-editable/inline-editable.tsx
+++ b/packages/calcite-components/src/components/inline-editable/inline-editable.tsx
@@ -11,7 +11,6 @@ import {
   VNode,
   Watch,
 } from "@stencil/core";
-import { getSlotted } from "../../utils/dom";
 import {
   InteractiveComponent,
   InteractiveContainer,
@@ -34,6 +33,7 @@ import {
   updateMessages,
 } from "../../utils/t9n";
 import { Scale } from "../interfaces";
+import { slotChangeGetAssignedElements } from "../../utils/dom";
 import { InlineEditableMessages } from "./assets/inline-editable/t9n";
 import { CSS } from "./resources";
 
@@ -163,7 +163,7 @@ export class InlineEditable
           onKeyDown={this.escapeKeyHandler}
         >
           <div class={CSS.inputWrapper}>
-            <slot />
+            <slot onSlotchange={this.handleDefaultSlotChange} />
           </div>
           <div class={CSS.controlsWrapper}>
             <calcite-button
@@ -305,19 +305,10 @@ export class InlineEditable
   //
   //--------------------------------------------------------------------------
 
-  mutationObserverCallback(): void {
-    this.updateSlottedInput();
-    this.scale = this.scale || this.inputElement?.scale;
-  }
-
-  onLabelClick(): void {
-    this.setFocus();
-  }
-
-  updateSlottedInput(): void {
-    const inputElement: HTMLCalciteInputElement = getSlotted(this.el, {
-      matches: "calcite-input",
-    });
+  handleDefaultSlotChange = (event: Event): void => {
+    const inputElement = slotChangeGetAssignedElements(event).filter(
+      (el): el is HTMLCalciteInputElement => el.matches("calcite-input"),
+    )[0];
 
     this.inputElement = inputElement;
 
@@ -325,8 +316,18 @@ export class InlineEditable
       return;
     }
 
-    this.inputElement.disabled = this.disabled;
-    this.inputElement.label = this.inputElement.label || getLabelText(this);
+    inputElement.disabled = this.disabled;
+    inputElement.label = inputElement.label || getLabelText(this);
+  };
+
+  mutationObserverCallback(): void {
+    // todo: kind of odd to be setting scale based on a slotted element scale.
+    // would require a scale event to properly handle this which would be better than a mutation observer
+    this.scale = this.scale || this.inputElement?.scale;
+  }
+
+  onLabelClick(): void {
+    this.setFocus();
   }
 
   private get shouldShowControls(): boolean {

From 1b924977d406bc6387ca2ac8695dc5ca8d288e52 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Mon, 30 Sep 2024 15:39:00 -0700
Subject: [PATCH 2/3] cleanup

---
 .../src/components/inline-editable/inline-editable.tsx          | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/calcite-components/src/components/inline-editable/inline-editable.tsx b/packages/calcite-components/src/components/inline-editable/inline-editable.tsx
index 841b12444dc..90640fb275d 100644
--- a/packages/calcite-components/src/components/inline-editable/inline-editable.tsx
+++ b/packages/calcite-components/src/components/inline-editable/inline-editable.tsx
@@ -321,8 +321,6 @@ export class InlineEditable
   };
 
   mutationObserverCallback(): void {
-    // todo: kind of odd to be setting scale based on a slotted element scale.
-    // would require a scale event to properly handle this which would be better than a mutation observer
     this.scale = this.scale || this.inputElement?.scale;
   }
 

From 79a80649c6fa36b98addda70c7181fbaa88e976d Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Mon, 30 Sep 2024 16:00:26 -0700
Subject: [PATCH 3/3] cleanup

---
 .../components/inline-editable/inline-editable.tsx    | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/packages/calcite-components/src/components/inline-editable/inline-editable.tsx b/packages/calcite-components/src/components/inline-editable/inline-editable.tsx
index 90640fb275d..0bd6333b9bc 100644
--- a/packages/calcite-components/src/components/inline-editable/inline-editable.tsx
+++ b/packages/calcite-components/src/components/inline-editable/inline-editable.tsx
@@ -24,7 +24,6 @@ import {
   setUpLoadableComponent,
 } from "../../utils/loadable";
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
-import { createObserver } from "../../utils/observers";
 import {
   connectMessages,
   disconnectMessages,
@@ -130,8 +129,6 @@ export class InlineEditable
     connectLabel(this);
     connectLocalized(this);
     connectMessages(this);
-    this.mutationObserver?.observe(this.el, { childList: true });
-    this.mutationObserverCallback();
   }
 
   async componentWillLoad(): Promise<void> {
@@ -147,7 +144,6 @@ export class InlineEditable
     disconnectLabel(this);
     disconnectLocalized(this);
     disconnectMessages(this);
-    this.mutationObserver?.disconnect();
   }
 
   componentDidRender(): void {
@@ -274,8 +270,6 @@ export class InlineEditable
 
   labelEl: HTMLCalciteLabelElement;
 
-  mutationObserver = createObserver("mutation", () => this.mutationObserverCallback());
-
   @State() defaultMessages: InlineEditableMessages;
 
   @State() effectiveLocale: string;
@@ -318,11 +312,8 @@ export class InlineEditable
 
     inputElement.disabled = this.disabled;
     inputElement.label = inputElement.label || getLabelText(this);
-  };
-
-  mutationObserverCallback(): void {
     this.scale = this.scale || this.inputElement?.scale;
-  }
+  };
 
   onLabelClick(): void {
     this.setFocus();