Skip to content

Commit c765dcb

Browse files
fix(inputs): remove invalid legacy warnings in input, textarea, and select (#28484)
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
1 parent dfaa006 commit c765dcb

File tree

1 file changed

+1
-6
lines changed

1 file changed

+1
-6
lines changed

core/src/utils/forms/form-controller.ts

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -48,11 +48,6 @@ export type LegacyFormController = {
4848
};
4949

5050
const hasLabelSlot = (controlEl: HTMLElement) => {
51-
const root = controlEl.shadowRoot;
52-
if (root === null) {
53-
return false;
54-
}
55-
5651
/**
5752
* Components that have a named label slot
5853
* also have other slots, so we need to query for
@@ -74,5 +69,5 @@ const hasLabelSlot = (controlEl: HTMLElement) => {
7469
return false;
7570
};
7671

77-
const NAMED_LABEL_SLOT_COMPONENTS = ['ION-RANGE'];
72+
const NAMED_LABEL_SLOT_COMPONENTS = ['ION-INPUT', 'ION-TEXTAREA', 'ION-SELECT', 'ION-RANGE'];
7873
const UNNAMED_LABEL_SLOT_COMPONENTS = ['ION-TOGGLE', 'ION-CHECKBOX', 'ION-RADIO'];

0 commit comments

Comments
 (0)