Wijmo popup closes when updating an inside *ngIf condition

Wijmo popup closes when updating an inside *ngIf condition

Posted by: david.benitez on 3 June 2019, 8:56 am EST

• 

  david.benitez

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 3 June 2019, 8:56 am EST

  Hello,

  I am having a few issues when I try to update the condition of the next *ngIf:

  <ng-container *ngIf="!estListeTropLongue; else messageListeTropLong">
              <button (click)="estListeTropLongue = true"></button>
          </ng-container>
          <ng-template #messageListeTropLong>
              <div class="message-liste-trop-long">Veuillez saisir des caractères pour lancer la recherche</div>
          </ng-template>
  

  This part of the code is inside a wijmo popup, every time that I click the button the condition evaluates to false and rapidly the else statement appears and then the popup closes.

  If I create the button outside the ng-container(still inside wijmo popup) the behavior is correct.
  
  I would be gratefull if someone can bring some light to the problem,

  Thank you

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 4 June 2019, 4:52 am EST

  Hi,

  The issue is arising because when you click on the button inside ng-container then the button becomes the active element and when estListeTropLongue is set to true, the button inside the ng-container is removed from the DOM which shifts the focus to the document’s body and removes the focus from the popup which hides the popup. You may fix the issue by setting the hideTrigger for the popup to ‘None’ or by setting the focus back to the popup. Please refer to the following code snippet:

  <wj-popup #popup>
  	<ng-container *ngIf="!estListeTropLongue; else messageListeTropLong">
              <button (click)="estListeTropLongue = true;popup.focus()"></button>
          </ng-container>
          <ng-template #messageListeTropLong>
              <div class="message-liste-trop-long">Veuillez saisir des caractères pour lancer la recherche</div>
          </ng-template>
  </wj-popup>
  

  API reference:
  
  • hideTrigger: https://www.grapecity.com/wijmo/api/classes/wijmo_input.popup.html#hidetrigger

  Regards

• 

  david.benitez

  • Post Options:
  • Link
    Copy

  Posted 4 June 2019, 5:44 am EST

  Thank you very much for the solution I didn’t thought about this.