bug: ion-input changes HTML structure on visibility change

[muuvmuuv]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

When using ion-input with aria--attribute it does work on first load, but if I toggle the visibility of that page or the element itself, it changes the HTML structure to legacy-input which breaks a lot of styling...

Expected Behavior

Don't change the HTML structure.

Steps to Reproduce

1. Open URL
2. Open Devtools
3. Inspect second ion-input

Code Reproduction URL

https://stackblitz.com/edit/angular-unkh29?file=src%2Fapp%2Fexample.component.html

Ionic Info

See Stackblitz, it's forked from ion-input docs

Additional Information

No response

[sean-perkins]

@muuvmuuv thanks for reporting this issue!

I am able to reproduce this issue. This happens due to this property binding:

[attr.aria-labelledby]="'label'"

When the control is re-rendered from the toggle, Ionic parses the attributes to see if there is an aria-label or aria-labelledby. This happens before Angular updates the attribute with the value, resulting in the warning and the legacy form syntax. This will only be a challenge until v8, when modern syntax is the default.

In your example, is there a reason you cannot use a static binding?

<ion-input aria-labelledby="label"></ion-input>

[muuvmuuv]

Yeah, because the hole form is coming as a config from the backend so too many variables for a static ID. Does that also behaves the same for aria-label? Or could I hack a re-render for ion-input?

[muuvmuuv]

I tested a bit with aria-labelledby="label" but Ionic produces way waay too much warnings here. I have 200> form inputs (ion-input, ion-select, ion-textarea etc.) and my console is flooded by warnings… I would love to use the new label, but it is all but consistent across all input fields, and this here is impossible to workaround:

<ion-item [class.mandatory]="control.required" form-element>
  <div class="label-group">
    <ion-label [hidden]="field.hideLabel" position="stacked" [id]="field.htmlId + '-label'">
      {{ field.name | localize }}{{ control.required ? "*" : "" }}
    </ion-label>
    &nbsp;
    <div
      class="save-contact"
      (click)="form.promptSaveContact(field)"
      *ngIf="
        !isWeb &&
        (field.bcRelation === 'person_email' ||
          field.bcRelation === 'person_mobile' ||
          field.bcRelation === 'person_phone') &&
        (control.value || (control.valueChanges | async))
      "
    >
      <fa-icon name="address-book"></fa-icon>
    </div>
  </div>

  <ion-input
    [autocapitalize]="'on'"
    [autocorrect]="'on'"
    [class.no-label]="field.hideLabel"
    [clearInput]="true"
    [attr.aria-label]="field.name | localize"
    [attr.aria-labelledby]="field.htmlId + '-label'"
    [legacy]="true"
    [formControl]="control"
    [id]="field.htmlId"
    [maxlength]="254"
    [type]="field.inputType"
  ></ion-input>
</ion-item>

We would have to change our hole form UI to get something like this to work, but unfortunately I cannot style the new labels or cannot consistently across ion-input and the others. IMO, This is far from being ready and warnings should be limited.

[muuvmuuv]

Ok, I finally found a working workaround.

<ion-label [attr.id]="option.id + '-label'" id="label-fix">
  <h3 [innerHTML]="asset.values.name | localize | safeHtml"></h3>
  <p [innerHTML]="asset.values.description | localize | safeHtml"></p>
</ion-label>
<ion-checkbox
  (ionChange)="toggle(option.id)"
  [checked]="values[option.id]"
  [attr.aria-labelledby]="option.id + '-label'"
  aria-labelledby="label-fix"
  slot="end"
></ion-checkbox>

Normaly the browser and other tools would report errors if ID's occur multiple times, but since Angular overrides them later on with [attr.XXX] it works.

[liamdebeasi]

Can you clarify why you are unable to use the new form syntax?

[muuvmuuv]

Since #27061 is closed I must revisit, but previously we were unable to put everything in the new label syntax for all form inputs. ion-checkbox and ion-option uses slots, so this was way easier.

We primarily have stacked labels and add more stuff into the stacked section (see label-group). I am willed to refactor our inputs, but ion-input still has the problem that styling isn't that easy.

[liamdebeasi]

Can you clarify what you are trying to do in ion-input? We recently added the ability to pass custom HTML to the label for input/textarea, so you should be able to style all parts of the label.

[muuvmuuv]

Yes, just saw it in the linked issue, this looks great and its still styleable because it's not a shadow-dom. Is this the case for ion-textare, ion-select, ion-checkbox and ion-radio as well? I would need to style them all in the same look.

[muuvmuuv]

Trying things out here: https://stackblitz.com/edit/angular-rkrcza?file=src%2Fapp%2Fexample.component.html,src%2Fapp%2Fexample.component.ts,src%2Fapp%2Fexample.component.scss

[liamdebeasi]

All form controls (checkbox, radio, etc) allow for custom HTML to be passed in to the component. We also added Shadow Parts to ion-select to allow for more advanced customizations of the label and container elements. (This is not needed for input and textarea since they do not use the Shadow DOM). We also have plans to add stacked labels for controls like checkbox and radio: #27229

It sounds like the root issue here is that there were blockers that prevented you from upgrading to the modern form syntax. Are there any remaining blockers after the v7.1 release?

[muuvmuuv]

Not any longer, just tested and with a little effort all should be migrateable now. Thanks for the work in that on all that. Will follow the issue you mentioned which would perfectly fit to our need since we use labels on these a lot.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.