ionic-framework
ionic-framework copied to clipboard
bug: IonItem styling wrong when standalone angular component is used with routerLink
Prerequisites
- [x] I have read the Contributing Guidelines.
- [x] I agree to follow the Code of Conduct.
- [x] I have searched for existing issues that already report this problem, without success.
Ionic Framework Version
v8.x
Current Behavior
Given an ion-item tag with a routerLink on it, when a standalone angular component only imports the IonItem component, the ion-activatable and ion-focusable classes are not generated, giving the element a text-like feel. When the whole IonicModule is imported, the two classes above are generated, giving the element a button-like feel.
Expected Behavior
Regardless of whether IonItem or IonicModule is imported, the generated HTML element behaves the same way and generates with pointer cursor and alternative hovering color when a routerLink is defined.
Steps to Reproduce
Just hover over the generated ion-item. When the IonItem is imported, the cursor remains an arrow and the background color does not change. When the IonicModule is imported, the cursor changes into a pointer and the background color changes towards gray.
Code Reproduction URL
https://stackblitz.com/edit/prza28ny?file=src%2Fapp%2Fexample.component.html,src%2Fapp%2Fexample.component.ts,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.routes.ts
Ionic Info
Don't know how to do that on stackblitz.
Additional Information
My current workaround is that I add href="#" (click)="(false)" to the element, but it would be nicer if I didn't have to do it.