bug: v7 input, do not show highlight in item without ion-label

[denys5dev]

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

Issue Summary:
When using ion-input within ion-item, and not add ion-label element - states(css classes) such as "focus", "disabled", and "invalid" are not set to ion-item element, it can lead to problems with setting highlight variables and other related functionalities. In the ionic 6 works as expected.

// working as expected
<ion-item lines="full">
  <ion-label></ion-label>
  <ion-input></ion-input>
</ion-item>

// not working
<ion-item lines="full" >
  <ion-input></ion-input>
</ion-item>

css:

ion-item {
  --highlight-height: 2px;
  --highlight-color-focused: #43e7f3;
  --highlight-color-valid: #6f58d8;
  --highlight-color-invalid: #ff46be;
}

Expected Behavior

--highlight-color-focused: #43e7f3;
--highlight-color-valid: #6f58d8;
--highlight-color-invalid: #ff46be;

should work without using ion-label element

Steps to Reproduce

1. create
   

2. set focus inside input

3.inspect ion-item element classes in devtools

Code Reproduction URL

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

Ionic Info

Ionic:
Ionic CLI : 7.1.1
Ionic Framework : @ionic/angular 7.1.2
@angular-devkit/build-angular : 16.1.0
@angular-devkit/schematics : 16.1.0
@angular/cli : 16.1.3

Capacitor:
Capacitor CLI : 5.0.5
@capacitor/android : 5.0.5
@capacitor/core : 5.0.5
@capacitor/ios : 5.0.5

Utility:
cordova-res : not installed globally
native-run : 1.7.2

System:
NodeJS : v18.16.1
npm : 9.5.1
OS : macOS Unknown

Additional Information

No response

[liamdebeasi]

Thanks for the report. I can reproduce this, but Ionic is working as intended.

When using the ion-label you are using the legacy form syntax which always shows the highlight. When omitting the ion-label you are using the modern form syntax which only shows the highlight on Material Design mode. This change was made to align with the native iOS and Material Design spec. The iOS spec changes the color of the flashing caret but does not show an underline. The MD spec on the other hand does show the underline.

[denys5dev]

Thanks for the report. I can reproduce this, but Ionic is working as intended.

When using the ion-label you are using the legacy form syntax which always shows the highlight. When omitting the ion-label you are using the modern form syntax which only shows the highlight on Material Design mode. This change was made to align with the native iOS and Material Design spec. The iOS spec changes the color of the flashing caret but does not show an underline. The MD spec on the other hand does show the underline.

Thank you for answer. I understand it but I played a bit also with mode="md" and for now eg I just can't get how to make custom border color when I focus inside ion-input.
For example in ionic 6 when I focus inside ion-input it sets classes like 'has-focus' etc. to ion-item and when I able to change border style using variables like --border-color etc.. but now looks like focus, disabled, invalid state are not coming to ion-item even using mode="md", but it works when I add ion-label element inside ion-item. Can you please provide an example how can I do it now with new ionic 7 API.

Here link to stackblitz with example:

https://stackblitz.com/edit/angular-6xeqay-nhqc9z?file=src%2Fapp%2Fexample.component.html,src%2Fapp%2Fexample.component.css

[liamdebeasi]

So there are a couple issues here:

1. Inputs used inside of items should not have outline styles because the item itself already visually defines the input container. This is noted on the ion-input documentation. Ideally the item usage should be removed and the border styles should be applied directly to the input.
2. We do not support passing icons inside of the input at the moment. We are tracking this in feat: standalone input component should support icons #26297. Once this feature has been released you should be good to a) remove the item usage and b) define the border directly on ion-input.

---

Until then I recommend opting your input into the legacy form syntax by setting legacy="true" on the ion-input. This will allow you to get the desired behavior until #26297 is implemented.

[ionitron-bot]

Thanks for the issue! This issue is being closed due to the lack of a reply. 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.

Thank you for using Ionic!