RadListView SwipeTemplate closes only on scroll to the right

[ishiharas]

Which platform(s) does your issue occur on?

• Android

Please provide the following version numbers that your issue occurs with:

• Progress NativeScript UI plugin version:

• 8.0.1

• CLI:

• 6.3.0

• Cross-platform modules:

• 6.3.0

• Runtime(s):

• 6.3.1

Please tell us how to recreate the issue in as much detail as possible.

The listView itself is a card view, where a single item takes up the most visible part of the screen.

1. Scroll (in horizontal direction) to the third item of the list.
2. Swipe down to show the swipe template of RadListView
3. Scrolling to the right closes the item automatically. Scrolling to the left leaves the swipe item open.

4. If a user now swipes another item, while the one stayed open outside of the screen from scrolling to the left, the whole listview becomes unusable.

   I've attached a .gif, which shows the issue with the steps described above.

I'm assuming, if scrolling to the right closes a swipeTemplate automatically, scrolling to the left should have the same functionality?

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

This is the demo project, which inherits the issue. The concerning lines are 8 to 33 of the html-file. https://github.com/ishiharas/RecipeShoppingList/blob/master/src/app/browse/browse.component.html

<RadListView row="1" [items]="dataItems | filter:searchResult" height="100%" swipeActions="true" (itemSwipeProgressStarted)="onSwipeCellStarted($event)" (itemSwipeProgressEnded)="onSwipeCellEnded($event)">
        <ListViewLinearLayout tkListViewLayout scrollDirection="Horizontal" spanCount="1" [itemWidth]="cardWidth"></ListViewLinearLayout>
        <ng-template tkListItemTemplate let-item="item" let-i="index">
            <CardView elevation="50" margin="0 20 30 20" radius="50" [width]="cardWidth" [height]="cardHeight">
                <GridLayout rows="*, *" columns="*">
                    <Image row="0" rowSpan="2" [src]="item.imagePath" [width]="cardWidth" [height]="cardHeight" [decodeHeight]="cardHeight" [decodeWidth]="cardWidth" style="transform: scale(1.2);"></Image>
                    <Label row="0" rowSpan="2" class="gradient-top"></Label>
                    <Label row="0" rowSpan="2" class="gradient-bottom"></Label>
                    <GridLayout rows="50, *" columns="*, *" row="0" rowSpan="2" margin="15">
                        <Label [text]="item.cookingTime.minutes + ' min.'" row="0" col="0" class="card-time"></Label>
                        <Label text="❦ 1" row="0" col="1" class="card-cooked-amount"></Label>
                        <Label [text]="item.title" textWrap="true" row="1" col="0" colSpan="2" class="card-title"></Label>
                    </GridLayout>
                </GridLayout>
            </CardView>
        </ng-template>
        <GridLayout *tkListItemSwipeTemplate rows="*" columns="*, *, *, *, *" class="v-t" marginTop="50">
            <Label col="1" class="card-swipe-circle"></Label>
            <Label col="2" class="card-swipe-circle"></Label>
            <Label col="3" class="card-swipe-circle"></Label>
            <Label col="1" text="&#xf022;" class="far default-color v-c h-c t-15"></Label>
            <Label col="2" text="&#xf004;" class="far default-color v-c h-c t-15"></Label>
            <Label col="3" text="&#xf14d;" class="far default-color v-c h-c t-15"></Label>
        </GridLayout>
    </RadListView>

The browse.component.ts can also be found in the repo, but has barely any changes in them.