GridLayout (tap) binding works in Android, partially in iOS

[dan-sel-tx]

Environment Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

• CLI: 5.4.0
• Android Runtime: 5.4.0
• iOS Runtime: 5.4.2
• NativeScript-Angular: 7.2.0
• Angular:7.2.0

Describe the bug Bind a Gridlayout, 2 columns, with the tap event, using ngFor:

<GridLayout row="2" rows="*,*,*"  >
        <GridLayout [row]="icon.mainRow"  columns="*,*" *ngFor="let icon of icons.myData">
            <GridLayout (tap)=doAction(icon.linkCommand) [col]="icon.colNumber" rows="auto,auto">
                <Image row="0" [src]="icon.Image"></Image>
                <Label row="1" [text]="icon.Text" class="text-center iconTitle"></Label>                              
            </GridLayout>
        </GridLayout>
    </GridLayout>

Note: the structure of the Grid is being built dynamically by passing in row and col for each new data item.

This works great on Android, with each (tap) event firing for each element. However, in iOS, only the second column (col='1') fires on tap. It does not matter where I place the (tap), on the image, the label, the same result. Works on Android, only works for second column on iOS.

Here is the other interesting thing, all other elements are bound properly on both devices. I get the Text and Image, as well as the correct column and row for each iteration of the data to the GridLayout on both devices.

Why only the second column, on iOS only, will fire the (tap), I am at a loss.

To Reproduce Layout grid as above, bind some sample data to it, for rows, cols, and text, image, link. Build for both platforms.

Expected behavior All (tap) events should fire for both columns on both platforms.

[tsonevn]

Hi @SuperdanTX, I was able to recreate the issue in a sample project, will mark it as a bug. We will investigate it further and for now, I would suggest keeping track of the problem for more info.

[dan-sel-tx]

Just a follow up on this issue: We upgraded the project to 6.0, same result as above. I had seen your comment in another post to change from [col]="thing" to col="{{thing}}", but no fix there either for this purpose. Thanks!

[tsonevn]

Hi @SuperdanTX, Can you send us the project with the latest changes, where you have applied the workaround(changing [col]="thing" -> col="{{thing}}")?

[dan-sel-tx]

You can refer to your sample project above. I simply changed to the above like this, with the same failed result. The first column wont handle the click, the second will. <GridLayout row="{{icon.mainRow}}" columns="*,*" *ngFor="let icon of icons"> <GridLayout (tap)=doAction(icon.linkCommand) col="{{icon.colNumber}}"

Previous binding: <GridLayout [row]="icon.mainRow" columns="*,*" *ngFor="let icon of icons"> <GridLayout (tap)=doAction(icon.linkCommand) [col]="icon.colNumber"

Neither way will fix the first column failing to handle click event.

[Hugo-Dlg]

Hello @tsonevn, I know it has been a while with this issue, but any update 2 years later ? I tried to do [col] and col="{{ }}" for my values. Also only had label inside my ngFor but the problem is still happening :

<GridLayout row="1" columns="*, *, *" *ngFor="let item of journey | slice:0:3 ; let idx = index">
	<GridLayout iosOverflowSafeArea="false" col="{{idx}}" class="labelList" [class.selected]="idx === journeyIdx" (tap)="onTap('typeOfJourney', item, idx)" >
	<label [text]="item"></label>
</GridLayout>
</GridLayout>
<GridLayout row="2" columns="*, *" *ngFor="let item of journey | slice:3:5 ; let idx = index" iosOverflowSafeArea="false">
	<label col="{{idx}}" class="labelListTwo" [class.selected]="idx + 3 === journeyIdx" (tap)="onTap('typeOfJourney', item, idx + 3)" [text]="item"></label>	 
</GridLayout>

2 different types of ngFor but none of them works, also tried with iosOverflowSafeArea but not working