Wijmo dropdown does not work properly with Angular Material dialog

Wijmo dropdown does not work properly with Angular Material dialog

Posted by: nilesh_nichal on 13 May 2019, 6:42 pm EST

• 

  nilesh_nichal

  • Post Options:
  • Link
    Copy

  Posted 13 May 2019, 6:42 pm EST

  In our Angular 4 application, I am showing Wijmo Combobox in a dialog. I am using Angular Material dialog module to show the dialog. I am able to click on arrow icon of Combobox and the dropdown opens. But, I am not able to click and select from the opened dropdown.

  However, interacting with the dropdown using keyboard works, though. As the user can not use mouse for interaction, it is very annoying for the customer and the customer has raised serious concerns.

  I am suspecting that the dropdown a combobox opens, it does open that as a popup. Z-index of this popup conflicts somehow with Angular material dialog probably.
  
  .
  
  I need to have it resolved urgently. Please advise.

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 14 May 2019, 9:38 pm EST

  We were able to replicate the issue at our end. The observed behavior is arising because when we open the drop-down panel, wijmo creates an element that contains the list of items and appends it to the body element.

  Now, when MatDialog is open, we cannot use mouse events on elements that are outside this dialog.

  So, to solve this issue, we just need to move this drop-down element div from the body to mat-dialog-content in the isDroppedDownChanged event of the combo box.

  Please refer to the sample given below:

  https://stackblitz.com/edit/ckkyne-vmczah