CODEWITHSUNDEEP
ionic-frameworkionic4
user2493235
user2493235

Reputation:

Detail Arrows for List Items in Ionic 4's "ios" Mode

Got a small problem with list items, using the latest version of Ionic. According to the documentation for ion-item, for the detail property:

If true, a detail arrow will appear on the item. Defaults to false unless the mode is ios and an href, onclick or button property is present.

I am using the default, and this is working fine with href, but when I use (click) it doesn't show up for "ios" mode. The code is:

<ion-item (click)="saveContact()">

Am I doing something wrong to get this to work with click handlers?

Upvotes: 0

Views: 574

Answers (1)

Jay Ordway
Jay Ordway

Reputation: 1749

I looked into the source code and it appears to be a bug with Ionic (v 4.1.0). This is from the source code, it appears that if the mode is set to "ios" and isClickable, then the detail arrow is shown.

isClickable() appears to be incorrect since it doesn't take into account the "onClick" and just looks for href and if the button attr is set to true. If button is set to true or href is passed, I do see the arrow with ios mode. 

 private isClickable(): boolean {
    return (this.href !== undefined || this.button);
  }

Then in the render method at line 153, when the the showDetail boolean is set (to show the arrow):

const clickable = this.isClickable();
    const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div' as any;
    const attrs = TagType === 'button' ? { type } : { href };
    const showDetail = detail !== undefined ? detail : mode === 'ios' && clickable;

Reference:

https://github.com/ionic-team/ionic/blob/master/core/src/components/item/item.tsx

Upvotes: 1

Related Questions