On Android, if I press on a button inside a RadListView and scroll the list, the button stay :highlighted. When I stop pressing it, the button remain :highlighted until I press it again. Why the button remain :highlighted?

HTML:

<GridLayout class="main" tkExampleTitle tkToggleNavButton>
<RadListView [items]="dataItems">
    <ng-template tkListItemTemplate let-item="item">
        <GridLayout class="post" rows="auto" columns="*">
            <Button row="0" col="0" class="btn btn-flat" text="Question"></Button>              
        </GridLayout>
    </ng-template>
</RadListView>

CSS:

.btn {
    font-size: 14px;
}

@mixin btn-highlighted {
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}
@mixin an-btn-flat-highlight($color-from, $color-to) {
    @keyframes btn-flat-highlight {
        from {
            background-color: $color-from;
        }
        to { 
            background-color: $color-to; 
            border-color: $color-to;
        }
    }
}


.btn-flat {
    background-color: transparent;
    border-width: 1;
    border-color: transparent;
    color: $color-secondary;
    padding: 0;
    &:highlighted {
        @include btn-highlighted;
        @include an-btn-flat-highlight(transparent, #ccc);
        animation-name: btn-flat-highlight;
    }
}

TS:

    export class ButtonListComponent implements OnInit {
      private _dataItems: ObservableArray<DataItem>;

      constructor() { }

      get dataItems(): ObservableArray<DataItem> {
          return this._dataItems;
      }

      ngOnInit() {
        let items: Array<DataItem> = [];
        for(let i=0; i<50; ++i){
          let item: DataItem = {
            name: "Activity "+i
          }
          items.push(item);
        }
        this._dataItems = new ObservableArray(items);
      }

    }

    interface DataItem {
      name: String;
    }

I expect button doesn't reamin :highlighted after the scrolling

0 Answers