xxxxxxxxxx1
<button type="button" class="btn btn-light shadow-0 dropdown-toggle dropdown-toggle-split border-light" 2
data-mdb-ripple-color="dark" 3
data-mdb-toggle="dropdown" 4
data-mdb-auto-close="false"5
aria-expanded="false">6
<span class="visually-hidden">Toggle Dropdown</span>7
</button>8
<div class="dropdown-menu" style="width: 520px;">9
<div class="px-4 py-3">10
11
<div class="row mb-4">12
13
<div class="col">14
15
<div class="row">16
17
<div class="col-12 mt-2 mb-2">18
19
<div id="div_DateFrom" class="form-outline datepicker" data-mdb-inline="true" data-mdb-auto-close="outside">20
<input type="text" class="form-control" id="date_From" data-mdb-toggle="datepicker" runat="server" />21
<label for="date_From" class="form-label">Start Datum</label>22
</div>23
24
</div>25
26
</div>27
28
<div class="row">29
30
<div class="col-12 mt-2 mb-2">31
32
<div id="div_DateUntil" class="form-outline datepicker" data-mdb-inline="true" data-mdb-auto-close="outside">33
<input type="text" class="form-control" id="date_Until" data-mdb-toggle="datepicker" runat="server" />34
<label for="date_Until" class="form-label">Ende Datum</label>35
</div>36
37
</div>38
39
</div>40
41
<div class="row">42
43
<div class="col-12 mt-2">44
45
<asp:CheckBox ID="chk_UseDateFilter" runat="server" Checked="True" meta:resourcekey="UseDateFilter" Text="Datumsfilter verwenden" CssClass="form-check" />46
47
</div>48
49
</div>50
51
<div class="row">52
53
<div class="col-12 mt-2">54
55
<select class="select">56
<option value="1">One</option>57
<option value="2">Two</option>58
<option value="3">Three</option>59
<option value="4">Four</option>60
<option value="5">Five</option>61
<option value="6">Six</option>62
<option value="7">Seven</option>63
<option value="8">Eight</option>64
</select>65
66
</div>67
68
</div>69
70
</div>71
72
</div>73
74
</div>75
76
</div>1
1
xxxxxxxxxx1
const dropdownEl = document.querySelector('.dropdown-toggle')2
const dropdown = mdb.Dropdown.getInstance(dropdownEl)3
4
document.addEventListener('show.mdb.dropdown', (e) => {5
document.addEventListener('click', handleDropdownClose)6
})7
8
9
document.addEventListener('hide.mdb.dropdown', (e) => {10
document.removeEventListener('click', handleDropdownClose)11
})12
13
function handleDropdownClose(e) {14
let item = e.target15
16
if ((item.nodeName === 'HTML') || (item.nodeName === 'BODY')) {17
dropdown.hide()18
}19
20
while ((item.nodeName != 'HTML') && (item.nodeName != 'BODY')) {21
if (item.classList.contains('dropdown-menu') || item.classList.contains('datepicker-dropdown-container') || item.classList.contains('dropdown-toggle')) {22
break;23
}24
25
if (item.parentNode) {26
item = item.parentNode27
}28
29
if ((item.nodeName === 'HTML') || (item.nodeName === 'BODY')) {30
dropdown.hide()31
}32
}33
} Console errors: 0