From c765dcbac4148762768d8c2bea9103e7d38c510b Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Tue, 7 Nov 2023 12:08:06 -0500
Subject: [PATCH] fix(inputs): remove invalid legacy warnings in input,
 textarea, and select (#28484)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Issue number: N/A

---------

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
When using an `ion-label` as a `label` slot inside of an `ion-input`,
`ion-textarea` or `ion-select` it erroneously flags the input as a
legacy component and ignores the `label-placement`:

<table>
  <tr>
    <td>
      Code
    </td>
    <td>
      Result
    </td>
  </tr>
  <tr>
    <td>
      <pre lang="html">
&lt;ion-item&gt;
  &lt;ion-input label-placement="floating"&gt;
    &lt;ion-label slot="label"&gt;
      &lt;ion-icon name="home"&gt;&lt;/ion-icon&gt;
      Slotted Label
    &lt;/ion-label&gt;
  &lt;/ion-input&gt;
&lt;/ion-item&gt;
&lt;ion-item&gt;
  &lt;ion-input label-placement="floating" value="Value"&gt;
    &lt;ion-label slot="label"&gt;
      &lt;ion-icon name="person"&gt;&lt;/ion-icon&gt;
      Slotted Label
    &lt;/ion-label&gt;
  &lt;/ion-input&gt;
&lt;/ion-item&gt;
      </pre>
    </td>
    <td>
<img
src="https://github.com/ionic-team/ionic-framework/assets/6577830/91ef5470-aba4-4bb6-b277-09e2b1a4650c">
    </td>
  </tr>
</table>

<img width="1005" alt="Screenshot 2023-11-07 at 10 37 43 AM"
src="https://github.com/ionic-team/ionic-framework/assets/6577830/00208625-2bdb-4b60-b7ce-e487dd89c47e">

## What is the new behavior?
Adds `ion-input`, `ion-textarea`, and `ion-select` as components that
can contain a named label slot so it no longer assumes that they are
legacy components.

<table>
  <tr>
    <td>
      Code
    </td>
    <td>
      Result
    </td>
  </tr>
  <tr>
    <td>
      <pre lang="html">
&lt;ion-item&gt;
  &lt;ion-input label-placement="floating"&gt;
    &lt;ion-label slot="label"&gt;
      &lt;ion-icon name="home"&gt;&lt;/ion-icon&gt;
      Slotted Label
    &lt;/ion-label&gt;
  &lt;/ion-input&gt;
&lt;/ion-item&gt;
&lt;ion-item&gt;
  &lt;ion-input label-placement="floating" value="Value"&gt;
    &lt;ion-label slot="label"&gt;
      &lt;ion-icon name="person"&gt;&lt;/ion-icon&gt;
      Slotted Label
    &lt;/ion-label&gt;
  &lt;/ion-input&gt;
&lt;/ion-item&gt;
      </pre>
    </td>
    <td>
<img
src="https://github.com/ionic-team/ionic-framework/assets/6577830/75f06c5e-6887-4e8e-8022-264b716b3e62">
    </td>
  </tr>
</table>


## Does this introduce a breaking change?

- [ ] Yes
- [x] No
---
 core/src/utils/forms/form-controller.ts | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/core/src/utils/forms/form-controller.ts b/core/src/utils/forms/form-controller.ts
index 0a7c628be0..d905d5ecdf 100644
--- a/core/src/utils/forms/form-controller.ts
+++ b/core/src/utils/forms/form-controller.ts
@@ -48,11 +48,6 @@ export type LegacyFormController = {
 };
 
 const hasLabelSlot = (controlEl: HTMLElement) => {
-  const root = controlEl.shadowRoot;
-  if (root === null) {
-    return false;
-  }
-
   /**
    * Components that have a named label slot
    * also have other slots, so we need to query for
@@ -74,5 +69,5 @@ const hasLabelSlot = (controlEl: HTMLElement) => {
   return false;
 };
 
-const NAMED_LABEL_SLOT_COMPONENTS = ['ION-RANGE'];
+const NAMED_LABEL_SLOT_COMPONENTS = ['ION-INPUT', 'ION-TEXTAREA', 'ION-SELECT', 'ION-RANGE'];
 const UNNAMED_LABEL_SLOT_COMPONENTS = ['ION-TOGGLE', 'ION-CHECKBOX', 'ION-RADIO'];