Primeng p-dropdown onchange with user confirmation

Question

Right now this is my implementation for primeng dropdown -

cust.component.html -

<p-dropdown #dd1 [options]="custList" [ngModel]="selectedCust" placeholder="Select Account Id"
              [style]="{'width':'200px'}" name="selectDropDown" optionLabel="userName"
              (onChange)="dd1.value = changeCust($event.value)"></p-dropdown>

cust.component.ts -

private currentVal:Customer;
..
..
changeDEA(cust: Customer) {
    var cfg = confirm("This action will stop the file upload. Do you still want to continue? ");
    if(cfg){
      this.currentVal = cust;
      // Proceed with normal change event
    }else{
      console.log("user cancelled skip..");
      this.selectedCust = this.currentVal;
      // Should revert back to original value
      return this.selectedCust;
    }

Problem is that the view value shown in the screen is not being reverted to original value.

Expected Result -

Dropdown changes from Value A to Value B.
User confirmation - Select "Cancel".
Page should still show the old value i.e Value A.

Actual result -

Dropdown changes from Value A to Value B.
User confirmation - Select "Cancel".
Page should is showing new value B. (without primeng, its showing blank value - https://stackblitz.com/edit/angular-dropwdown-confirmation-issue)

Adding GIF -

Came across this code which works fine with native angular but fails when options are populated dyamically with *ngFor - https://stackblitz.com/edit/angular-dropwdown-confirmation-issue

FYI, tried various github posts but none of them found useful.

Angular Version - "@angular/core": "^5.2.0"
PrimeNG - "primeng": "^5.2.4"

Answer 1

Actually your model is working correctly. Your problem is selected index of dropdown. So u also need to change it. Demo

In html use (change) event

<select #dd1 id="pageSize" [(ngModel)]="myValue" (change)="onChange($event)"  

  placeholder="Select Account Id"> 
              <option *ngFor="let d of custList" [ngValue]="d.userName" >{{d.userName}}</option>
  </select> 

in component.ts change event target select index too

onChange(event) {
    const response = window.confirm("Are you sure to want change the value?");
    if (response) {

      this.oldValue = this.myValue;
    }
    else {
      this.myValue = this.oldValue;
      event.target.selectedIndex=this.custList.findIndex(x=>x.userName==this.oldValue)
    }
  }