Ionic-framework: ion-item should be fast tappable by default

Created on 10 Nov 2016  路  6Comments  路  Source: ionic-team/ionic-framework

In our demos we show people to do clicks on list items like this:

unnamed

However, this will result in tap-click not putting the fast click handlers for UIWebView (iOS issue only)

Can we address this for the next release? Either we update our docs or we update tap-click to activate on all ion-items. Would this cause any issues?

Most helpful comment

Well ideally they should be buttons if clicks are being added, we do have it in the Item API docs here: http://ionicframework.com/docs/v2/api/components/item/Item/#common-usage

I think we should encourage people to use buttons and update those docs to reflect that.

All 6 comments

Well ideally they should be buttons if clicks are being added, we do have it in the Item API docs here: http://ionicframework.com/docs/v2/api/components/item/Item/#common-usage

I think we should encourage people to use buttons and update those docs to reflect that.

@brandyscarney I wonder if we could add warning messages when using (click) handlers in non-button types.

I think this is the kind of DX we want...

While the use of buttons should probably be encouraged, I would love to see the tappable attribute documented somewhere! Some use-cases require click handlers on elements that cannot be a button. The tappable attribute is awesome for these cases, but I had to discover it looking at tap-click's source.

In the example below, if I replace the <ion-item (click)="openDetails"> by a <button ion-button (click)="openDetails"> the button element doesn't get rendered on the page. But the click event on the ion-item component is necessary for my use case.

<ion-list>
  <ion-item-sliding #item>
    <ion-item (click)="openDetails">
      Item
    </ion-item>
    <ion-item-options side="left">
      <button ion-button (click)="favorite(item)">Favorite</button>
      <button ion-button color="danger" (click)="share(item)">Share</button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

@gigocabrera It should be changed to <button ion-item (click)="openDetails">, not <button ion-button (click)="openDetails">. Could you try that and let us know if it works? :)

@brandyscarney when I use <button ion-item (click)="openDetails"> it works like a charm. Thank you for pointing that out. But it's very confusing from the DOCS and I'm sure I'm not the only one using ion-item with click events

Was this page helpful?
0 / 5 - 0 ratings