Description
Bug Report
Ionic version:
[x] 4.x
Current behavior:
Attempting to set disabled with Hammer JS gesture to ion-item-sliding on template based on Input variable only receives the first change, but never executes the changes made afterwards. This also happens if you try to set this with ngOnChanges, first change is executed, never the afterwards.
Expected behavior:
ion-item-sliding disable property should receive all changes via template when they happen or via controller with ngOnChanges. These changes should be identified with Hammer JS.
Steps to reproduce:
- Include Hammer JS to your project
- Create an ion-item-sliding component on your template
- Bind a press event to your component
- Make a condition to disable the item slide with the press event
Related code:
https://stackblitz.com/edit/ionic-v4-angular-tabs-gdokuu
The component is found inside the "tab1" folder, and its called on "tab1.page.html".
Press and hold the item "Test Item" to disable the item slide.
If you wish to see with ngOnChanges, just uncomment ngOnChanges and ViewChild on item-slide.component.ts, comment the second line and uncomment the first line on item-slide.component.html.
<ion-item-sliding>
<ion-item-options side="end">
<ion-item-option>Test 1</ion-item-option>
<ion-item-option>Test 2</ion-item-option>
</ion-item-options>
<ion-item>
Test Item
</ion-item>
</ion-item-sliding>import { Component, OnInit, Input, ViewChild, OnChanges, SimpleChanges } from '@angular/core';
import { IonItemSliding } from '@ionic/angular';
@Component({
selector: 'app-item-slide-issue',
templateUrl: './item-slide-issue.component.html',
styleUrls: ['./item-slide-issue.component.scss'],
})
export class ItemSlideIssueComponent implements OnInit, OnChanges {
@Input() selected: boolean = false;
@ViewChild(IonItemSliding) itemSlide: IonItemSliding;
constructor() { }
ngOnInit() {}
ngOnChanges(changes: SimpleChanges) {
if (typeof changes.selected.currentValue != 'undefined') {
if (changes.selected.currentValue == true) {
console.log('Disables item sliding.');
this.itemSlide.disabled = true;
}
else {
console.log('Should enable item sliding again, but it won\'t. Disabled is set to false, but the slide remains disabled.');
this.itemSlide.disabled = false;
}
}
}
}Other information:
Ionic info:
Ionic:
Ionic CLI : 5.4.5 (/home/rodrigo/.nvm/versions/node/v10.15.3/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.7.4
@angular-devkit/build-angular : 0.13.9
@angular-devkit/schematics : 7.3.9
@angular/cli : 7.3.9
@ionic/angular-toolkit : 1.5.1
Cordova:
Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.1.0, ios 5.0.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 15 other plugins)
Utility:
cordova-res : 0.6.0 (update available: 0.8.1)
native-run : 0.2.8 (update available: 0.2.9)
System:
Android SDK Tools : 26.1.1 (/home/rodrigo/Android/Sdk)
NodeJS : v10.15.3 (/home/rodrigo/.nvm/versions/node/v10.15.3/bin/node) npm : 6.12.0
OS : Linux 4.15