filter

<div class="d-flex align-items-center gap-2 gap-lg-3">
<!--begin::Filter menu-->
<div class="m-0">
<input type="checkbox" id="filterToggleCheckbox" class="invisible" class="invisible filter-menu-toggle" />
<label for="filterToggleCheckbox" class="btn btn-sm btn-flex btn-secondary fw-bold filter-menu-label">
<i class="ki-duotone ki-filter fs-6 text-muted me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>Filtreleme
</label>

<!--end::Menu toggle-->
<!--begin::Menu 1-->

<div class="menu menu-sub menu-sub-dropdown w-250px w-md-350px" id="filterMenu">
<!--begin::Header-->
<div class="px-7 py-5">
<div class="fs-5 text-dark fw-bold">Filtreleme Seçenekleri</div>
</div>
<!--end::Header-->
<!--begin::Menu separator-->
<div class="separator border-gray-200"></div>
<!--end::Menu separator-->
<!--begin::Form-->
<div class="px-7 py-5">

<!--begin::Input group-->
<div class="mb-10">
<!--begin::Label-->
<label class="form-label fw-semibold">Durum:</label>
<!--end::Label-->
<!--begin::Input-->
<div>
<select class="form-select form-select-solid" [(ngModel)]="selectedStatus" placeholder="Durum">

<option value="">Tüm SipariÅŸler</option>
<option value="Yeni OluÅŸturuldu">Yeni OluÅŸturuldu</option>
<option value="Tedarikçi Onayı Bekleyenler">Tedarikçi Onayı Bekleyenler</option>
<option value="Tedarikçi Onaylı">Tedarikçi Onaylı</option>
<option value="Elden Onaylı">Elden Onaylı</option>
<option value="İptal Edilmiş(Onaylı)">İptal Edilmiş(Onaylı)</option>
<option value="İptal Edildi(Onaysız)">İptal Edildi(Onaysız)</option>
</select>
</div>
<!--end::Input-->
</div>
<div class="mb-10">
<!--begin::Label-->
<label class="form-label fw-semibold">Bir Tarih Aralığı girin:</label>
<!--end::Label-->
<!--begin::Input-->
<mat-form-field >
<mat-label>Tarih aralığını seçin</mat-label>
<mat-date-range-input [rangePicker]="picker" (dateChange)="filterOrdersByDate()">
<input matStartDate placeholder="BaÅŸlangıç tarihi" [(ngModel)]="selectedStartDate">
<input matEndDate placeholder="BitiÅŸ tarihi" [(ngModel)]="selectedEndDate">
</mat-date-range-input>
<mat-hint>GG/AA/YYYY – GG/AA/YYYY</mat-hint>
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
<mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="mb-10">
<!--begin::Label-->
<label class="form-label fw-semibold">Lokasyonlar:</label>
<!--end::Label-->
<!--begin::Options-->
<div class="d-flex">
<!-- ilk satır -->
<!--begin::Options-->
<label class="form-check form-check-sm form-check-custom form-check-solid me-4">
<input class="form-check-input" type="checkbox" value="1" />
<span class="form-check-label">Adapazarı</span>
</label>
<!--end::Options-->
<!--begin::Options-->
<label class="form-check form-check-sm form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value="2" checked="checked" />
<span class="form-check-label">Merkez</span>
</label>

<!--end::Options-->
</div>
<!--end::Options-->
</div>
<!--begin::Options-->
<div class="d-flex">
<!-- ikinci satır -->
<!--begin::Options-->
<label class="form-check form-check-sm form-check-custom form-check-solid me-4">
<input class="form-check-input" type="checkbox" value="1" />
<span class="form-check-label">Diyarbakır</span>
</label>
<!--end::Options-->
<!--begin::Options-->
<label class="form-check form-check-sm form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value="2" checked="checked" />
<span class="form-check-label">Panel</span>
</label>
<!--end::Options-->
</div>

<!--end::Input group-->
<!--begin::Input group-->
<br />
<div class="mb-10">
<!--begin::Label-->
<label class="form-label fw-semibold">SipariÅŸ Durumu:</label>
<!--end::Label-->
<!--begin::Switches-->
<div class="d-flex align-items-center">
<!-- Ä°lk checkbox -->
<div class="form-check form-check-sm form-check-custom form-check-solid me-3">
<input class="form-check-input me-1" type="checkbox" data-kt-check="true" data-kt-check-target="#kt_customers_table .form-check-input" value="1" />
<label class="form-check-label">Açık SipariÅŸler</label>
</div>
<!-- Ä°kinci checkbox -->
<div class="form-check form-check-sm form-check-custom form-check-solid">
<input class="form-check-input me-1" type="checkbox" value="2" />
<label class="form-check-label">Kapalı Siparişler</label>
</div>
</div>
<!--end::Switches-->
</div>
<div class="mb-10">
</div>
<!--end::Input group-->
<!--begin::Actions-->
<div class="d-flex justify-content-end">
<button type="button" class="btn btn-sm btn-light btn-active-light-primary me-2" (click)="resetFilters()">Sıfırla</button>
<button type="submit" class="btn btn-sm btn-primary" (click)="applyFilter(selectedStatus)" data-kt-menu-dismiss="true" onclick="document.getElementById('filterToggleCheckbox').checked = false;">Apply</button>
</div>
<!--end::Actions-->
</div>
<!--end::Form-->
</div>
<!--end::Menu 1-->
</div>
<!--end::Filter menu-->
<!--begin::Secondary button-->
<!--end::Secondary button-->
<!--begin::Primary button-->
<!--end::Primary button-->
</div>
I have such a code blog, and in this code blog, when you click anywhere other than the page, the window that opens should close, but somehow it does not close