question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: Clickable Ion list item inconsistency

See original GitHub issue

Bug Report

Ionic version:

[x] 5.x Ionic Angular

Current behavior: If you have menu with a list of clickable items the only clickable components inside of these items are buttons, even if you add a click event to something else inside it gets stripped down. The same list outside of an ion menu works fine with everything clickable. Also the ‘button’ attribute said to fix this doesn’t make the ion item clickable it just adds a detail at the end. I tried adding an href=“#” as well which makes the app navigate in a weird manner. Usually href with a pound (#) does not navigate anyway in the angular router.

Gif of the issue:

https://gfycat.com/ifr/RewardingExemplaryGecko

The code in both views is the same.

Expected behavior: Ion items with a (click) property to be wholly clickable.

Ionic info:

Ionic:

   Ionic CLI                     : 6.2.2 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.5
   @angular-devkit/build-angular : 0.900.7
   @angular-devkit/schematics    : 8.3.25
   @angular/cli                  : 9.0.7
   @ionic/angular-toolkit        : 2.2.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0, ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 19 other plugins)

Utility:

   cordova-res (update available: 0.11.0) : 0.9.0
   native-run (update available: 1.0.0)   : 0.3.0

System:

   ios-deploy : 1.10.0
   ios-sim    : 8.0.2
   NodeJS     : v10.19.0 (/usr/local/Cellar/node@10/10.19.0/bin/node)
   npm        : 6.13.4
   OS         : macOS Catalina
   Xcode      : Xcode 11.4 Build version 11E146

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

0reactions
ionitron-bot[bot]commented, May 6, 2020

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Button click inside ion-item not working - ionic-v3
Well, my scenario is that I have an ion-list with ion-items. When clicking on an item (100% width), the item gets marked as...
Read more >
ion-item clickable properties not working (Ionic 4)
Best way to go about doing this: Use a transparent ion-button inside of an ion item. This creates a 'click zone' which is...
Read more >
How to Fix the "Clickable Elements Too Close Together" Error ...
Learn how to fix the "Clickable Elements Too Close Together" error in the Google Search Console. We'll teach you 3 simple methods to...
Read more >
A Sliding Nightmare: Understanding the Range Input
We need to bring up DevTools, then go to the range input we want to inspect, right click it, select Inspect Element and...
Read more >
Accessible Rich Internet Applications (WAI-ARIA) 1.2 - W3C
In the following example, a list item ( html:li ) has been used to ... to set DOM focus to the containing element...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found