bug: Item slide disabled is set to false on ngOnChanges, but is still disabled with HammerJS

[rodrigomoretto]

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

[liamdebeasi]

Thanks for the issue. It looks like disabling/re-enabling the gesture via HammerJS leaves our internal gesture system at an inconsistent state. I will be putting up a PR soon that addresses this.

[liamdebeasi]

Can you give the following dev build a try and let me know if it resolves your issue?

npm i @ionic/angular@4.12.0-dev.201911071510.17fe23a

[rodrigomoretto]

Hi, apparently it works with this dev build.

I'm just in doubt if I can use ionic/angular@4.8+ with angular 7 without much problems, since I've tried upgrading it to angular 8 and there were a few issues with CSS due to how its set on my project, which led me to downgrade again.

Is this already usable for production or is it still testing?

[liamdebeasi]

Glad to hear the dev build works. The dev build I provided is essentially the contents of Ionic Framework v4.11.3 plus this bug fix, so it should be safe to use in production if you need to deploy a hotfix. Once this fix releases in an upcoming version of Ionic, I would recommend switching over to that version.

[liamdebeasi]

Thanks for the issue. This issue has been fixed via #19855 and will be available in an upcoming release of Ionic Framework.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.