ionic-team / ionic-team/ionic-framework

bug: IonItem styling wrong when standalone angular component is used with routerLink

Open
#30,394 0 comments 0 reactions 0 assignees View on GitHub
triage
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 15h
Merged PRs (30d)
51

Description

### Prerequisites

- [x] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [x] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [x] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.