Dropdown Event Triggers Fails inside Modals

[luyouxin84]

ratio and dropdown have css problem in amexio-window-pane
dropdown cant select, click event is not work

[pratikthecook]

Please provide your usage source code

[luyouxin84]

i have try again.. i had use bootstrap4 origine dropdown , it not work too.
it look like bootstrape4 dropdown not work good in amexio-window-pane..

my code:

<amexio-window-pane [(showWindow)]="edit_condition_dispaly" [title]="'Employee Registration'" [closable]="true">

请选择一天

<a class="dropdown-item" (click)="ttt()">Action
Another action
Something else here

<amexio-radio-group [fieldLabel]="'选择一天'" name ="gender"
[fieldName]="'genderDemo'"
[dataReader]="'data'"
[displayField]="'day'"
[valueField]="'value'"
[radioGroupBindData]="week"
(selectedValue)="obj_edit.setSelectedGender($event)"
[column]="'3'">



<amexio-number-input [fieldLabel]="'开始时间(数字整数，24小时制)'" name="name"
[placeholder]="'数字整数，24小时制'" [(ngModel)]="obj_edit.must_time_start">

<amexio-number-input [fieldLabel]="'结束时间(数字整数，24小时制)'" name="name"
[placeholder]="'数字整数，24小时制'" [(ngModel)]="obj_edit.must_time_end">

例外时间

{{obj_edit.not_start}}

{{obj_edit.not_end}}

<amexio-checkbox [fieldLabel]="''" name="language"
[checkBoxGroupDownBindData]="checkboxGroupdata"
[dataReader]="'response.data'"
[displayField]="'language'"
[valueField]="'checked'"
(change)="test()"
[column]="'5'">

<div *ngIf="flag">
开始的时间：
<input type="datetime-local" class="layui-input" [(ngModel)]="obj_edit.not_start_new">
结束的时间：
<input type="datetime-local" class="layui-input" [(ngModel)]="obj_edit.not_end_new">

<amexio-btn [label]="'提交'" [type]="'primary'" (click)="update_condition()">

[luyouxin84]

i find solution 👍
u must use dropdown with <button > as menu , it work find in window-pane. Not use <a> as menu
example in bootstrape 4 site.
https://v4-alpha.getbootstrap.com/components/dropdowns/#menu-items

code example:
<amexio-window-pane [(showWindow)]="edit_condition_dispaly" [title]="'Employee Registration'" [closable]="true"> <amexio-pane-body> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button> <div class="dropdown-menu" aria-labelledby="dropdownMenu2"> <button class="dropdown-item" type="button" (click)="ttt()">Action</button> <button class="dropdown-item" type="button">Another action</button> <button class="dropdown-item" type="button">Something else here</button> </div> </div> </amexio-window-pane>

[pratikthecook]

Thankyou @luyouxin84 for reporting and providing a workaround, as you have mentioned this is indeed a bug not from our side but from the bootstrap team itself here's the link to the issue Issue.
As you can see the bootstrap is in alpha stages, we expect they would resolve it soon. Till Then we would implement a workaround.

[pratikthecook]

Resolved