bug: slot error not working properly in ion-item in some cases

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

• v4.x
• v5.x
• v6.x

Current Behavior

The new slot “error” does not work when using an ion-input in the same ion-icon. The slot “helper” seems to work normally.

<ion-item>
     <ion-label [position]="'fixed'">Label</ion-label>
     <ion-input></ion-input>
     <ion-note slot="error">Test</ion-note
</ion-item>

In this example, the “Test” text is not visible at all. When I use an ion-label instead of an ion-note for the error, it shows the error element but it only has 50% width of the full ion-item.

Expected Behavior

Items with the error slot should show up as expected.

Steps to Reproduce

See above.

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.18.1 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 6.0.1 @angular-devkit/build-angular : 12.2.12 @angular-devkit/schematics : 12.2.12 @angular/cli : 12.2.12 @ionic/angular-toolkit : 5.0.3

Capacitor:

Capacitor CLI : 3.3.3 @capacitor/android : not installed @capacitor/core : 3.3.3 @capacitor/ios : not installed

Utility:

cordova-res (update available: 0.15.4) : 0.15.1 native-run : 1.5.0

System:

NodeJS : v17.0.1 (/usr/local/Cellar/node/17.0.1/bin/node) npm : 8.1.0 OS : macOS Monterey

Additional Information

No response

[sean-perkins]

@vildhjarta8 I’m seeing the same issue as you. It’s a Safari issue with style priority (can see with web browser).

I’ll look into the fix. I may need to do some repurposing/splitting of this issue, because we have a few different conversations around the slot="error" happening and I don’t want to miss out on those details.

[sean-perkins]

Hello @andreas-aeschlimann, thanks for the issue!

This may just be poor documentation on our part.

The error slot with ion-item is intended to be used with a form and currently our only direct integration is with Angular Forms. When using form controls, Ionic will map the ng-invalid class to ion-invalid on the item. This class is the missing piece to make the error slot visible.

If you update your example to this:

<ion-item class="ion-invalid">
  <ion-label position="fixed">Label</ion-label>
  <ion-input></ion-input>
  <ion-note slot="error">Test</ion-note>
</ion-item>

You will see the error slot always.

Let me know if this resolves the issue for you. I don’t believe this is a bug, as we don’t want to display the error contents if the form control isn’t in an error state.