Problem with menu and sliding items


I have a project which uses the ion-menu and consists of several list pages with ion-item-sliding inside. Few weeks ago I noticed that after navigating to any of the pages via the menu I can’t slide the items until I click somewhere first (or release the button after the unsuccessful initial attempt). At first I thought that I’m not accurate enough because with the second try it worked as expected and I ignored the problem for a while but it persisted. When I navigate to the page and try to slide to the left in order to show the options nothing happens. But when I drag to the right (no matter where I start from) the side menu appears (it’s on the left side). Yes, I know this is how the menu is meant to open but normally you should start sliding close to the edge and now it opens even if I slide from the far right.

I noticed that there is no such problem with a fresh app (ionic start app_name sidemenu). I started looking for differences between my project and the new one and finally managed to reproduce it. You can look at the code here.

It appears only if:

  • In app.components.ts the default page property is replaced with a getter method.
  • In app.html the type of event which opens the page is tap instead of click.

If any of the two conditions is not satisfied everything works normally.
I tried to play with the package versions but failed to fix it this way. It is tested on both Android device and browser (Google Chrome).

I’m pretty sure that it’s documented somewhere and the reason for the problem is obvious for most of you but due to my lack of knowledge and understanding of how Ionic works I didn’t find it that easy. What am I doing wrong?

I didn’t find any similar topic here but it was a struggle to describe the problem. If the current topic is a duplicate, please point me to the original.