bug: highlight not showing in ion-item with ion-input

[telpat0298]

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

I've placed an ion-input tag inside an ion-item tag and added the css properties --highlight-color-focused: #0f0 and highlight-height: 2px to the ion-item tag, which per documentation, is correct. The highlight is not shown when the item/input is focused. I tried with mode="md" which makes no difference.

I've tried to investigate the problem myself in in a stackblitz repo and i found that there is a transform: scaleX(0) property on the highlight div-container in the shadow dom of the ion-item element. Therefore the height is always 0px. In the example in the documentation, this scaleX property is overwritten. This doesn't happen in the stackblitz, because in the stackblitz it seems that the has-focus class i never appended to the class list of the item when the item has focus. Only to the child input.

The only two ways i managed to display the highlight are:

• Place a ion-label inside the item. Then, the highlight is displayed
• Add legacy="true" to the item

Expected Behavior

The highlight should appear when the css property --highlight-color-focused is present on the ion-item tag.

Steps to Reproduce

1. Create an ion-item tag
2. Place an ion-input tag inside
3. Add the css property --highlight-color-focused to the ion-item tag

Code Reproduction URL

https://stackblitz.com/edit/ionic7-highlight-issue

Ionic Info

Ionic:

Ionic CLI : 7.1.1 (/opt/homebrew/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 7.2.3
@angular-devkit/build-angular : 16.2.0
@angular-devkit/schematics : 16.2.0
@angular/cli : 16.2.0
@ionic/angular-toolkit : 6.1.0

Capacitor:

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

Utility:

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

System:

NodeJS : v18.17.0 (/opt/homebrew/Cellar/node@18/18.17.0/bin/node)
npm : 9.6.7
OS : macOS Unknown

Additional Information

No response

[liamdebeasi]

Thanks for the report. --highlight-color-focused is a deprecated CSS Variable on ion-item that only works with the legacy form syntax. However, I realize this is confusing since there is no deprecation warning. I opened #27987 to address this.

Your example without ion-label is using the modern form syntax which does not render a highlight. This is intentional and aligns with the Material Design spec. Inputs in a list typically do not show the focus highlight. However, if you were to use the input outside of a list then you could use the --highlight-* CSS properties on ion-input.

The other two examples appear to work because they are using the legacy form syntax by adding an ion-label to the item. You can verify this by looking at the deprecation warnings in the console.

---

I am going to close this as Ionic is working as intended, though I will be sure that a deprecated note gets added to our docs. Let me know if you have any questions.

[telpat0298]

@liamdebeasi Thanks for the answer. In the provided documentation link (this one) not only the deprecated warning is missing, it is not working as described. Setting these variables (--highlight-height, --highlight-color-invalid, ...) has no effect or what so ever on the highlight. Also, setting these variables directly on the input inside an item has no effect. Is there any other way to signal e.g. an invalid input with highlights or is this now up to the developer?

Thanks

[liamdebeasi]

That documentation is for the legacy syntax which is why the styles are only set on the ion-item. That demo should probably be removed.

[telpat0298]

Ok, thanks for helping

[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.