Ion-items not clickable as button in content of ion-menu

Ionic Framework
1

All,

According to the documentation for ion-item, https://ionicframework.com/docs/api/item

An ion-item can be used as a button

<!-- Item as a Button -->
<ion-item (click)="buttonClick()">
  <ion-label>
    Button Item
  </ion-label>
</ion-item>

I have found that an ion-item cannot be used as a button (as documented) and is not receiving clicks when used with ion-content of a ion-menu. Only button-type things receive clicks in the side menu content.

Are you seeing this? I was porting code from Ionic2 to Ionic4 and found that this capability broke.
very useful for menu items.

<ion-menu
        side="start"
        type="overlay"
        menuId="left_menu"
        swipeGesture="true"
        contentId="left_menu_content"

>
    <ion-header>
        <ion-toolbar color="primary">
            <ion-title>Left Menu</ion-title>
        </ion-toolbar>
    </ion-header>

    <ion-content id="left_menu_content">
        <ion-list>
            <!-- no click received -->
            <ion-item (click)="buttonClick()">
                <ion-label>Goto Feature ...</ion-label>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-menu>
2

I figured out the voodoo by deconstructing the default “sidemenu” project. It seems that by default, the side menu content inherited (pointer-events:none) from some Ionic class.

I created
.clickable {
pointer-events: auto !important;
}

And then set class attribute on ion-item as class=“clickable ion-activatable”

The ion-activatable gives it the nice rollover effect.

3 Likes
3

Answer by @jason314 kind of worked for me, but I had to use following css instead

.custom-menu-item.item {
pointer-events: auto !important;
}

I could not find the new class in my browser, after adding it in my html.

1 Like
4

Same here,

Don’t want to investigate more but your tip about pointer-events: auto !important; was very helpful.

5

Have you seen the latest documentation? They note an important detail you perhaps may have missed:

<ion-item button (click)="buttonClick()">
      <ion-label>
         Button Item
     </ion-label>
</ion-item>

A button property is to be present in the element. I’ve actually used it today, and it worked as expected.

6

Adding the button attribute actually does not fix it as pointer events are still disabled in open menu’s. This very much seems like a bug to me. Anyway I fixed it with the following so I do not need any extra classes:

ion-item[button] {
  pointer-events: auto !important;
}
2 Likes
7

You sir are a gentleman and a scholar. I’ve waisted a day on this bullshit

8

thats was very helpfull. I just add this on my scss file
ion-menu *{
pointer-events: auto !important;
}
and now it works!!!