fix(search) : solution to close modal

src/app/structure-list/components/modal-filter/modal-filter.component.html

-<div
-  (clickOutside)="closeModal()"
-  fxLayout="column"
-  fxLayoutAlign="space-between"
-  [ngClass]="['modal', 'modal' + getModalType()]"
->
+<div fxLayout="column" fxLayoutAlign="space-between" [ngClass]="['modal', 'modal' + getModalType()]">
   <div class="body-wrap">
     <div class="contentModal" fxLayout="row wrap" fxLayoutAlign="flex-start" *ngIf="categories.length > 0">
       <div class="blockFiltre" *ngFor="let c of categories">

src/app/structure-list/components/search/search.component.html

@@ -24,53 +24,57 @@
       </div>
     </form>
   </div>
-
-  <div class="btnSection" fxLayout="row" fxLayoutAlign="space-between center">
-    <button
-      type="button"
-      [ngClass]="{
-        selected: modalTypeOpened === TypeModal.accompaniment,
-        containCheckedFilters: numberAccompanimentChecked
-      }"
-      (click)="openModal(TypeModal.accompaniment)"
-      fxLayout="row"
-      fxLayoutAlign="space-between center"
-    >
-      <span class="btnText">Accompagnement</span>
-      <div class="arrow"></div>
-    </button>
-    <button
-      type="button"
-      [ngClass]="{ selected: modalTypeOpened === TypeModal.training, containCheckedFilters: numberTrainingChecked }"
-      (click)="openModal(TypeModal.training)"
-      fxLayout="row"
-      fxLayoutAlign="space-between center"
-    >
-      <span class="btnText">Formations</span>
-      <div class="arrow"></div>
-    </button>
-    <button
-      type="button"
-      [ngClass]="{
-        selected: modalTypeOpened === TypeModal.moreFilters,
-        containCheckedFilters: numberMoreFiltersChecked
-      }"
-      (click)="openModal(TypeModal.moreFilters)"
-      fxLayout="row"
-      fxLayoutAlign="space-between center"
-    >
-      <span class="btnText">Plus de filtres</span>
-      <div class="arrow"></div>
-    </button>
-  </div>
-  <div *ngIf="isOpenModal">
-    <app-modal-filter
-      [modalType]="modalTypeOpened"
-      [categories]="categories"
-      [modules]="checkedModulesFilter"
-      (searchEvent)="fetchResults($event)"
-      (closeEvent)="closeModal()"
-    ></app-modal-filter>
+  <div (clickOutside)="closeModal()">
+    <div class="btnSection" fxLayout="row" fxLayoutAlign="space-between center">
+      <button
+        type="button"
+        [ngClass]="{
+          selected: modalTypeOpened === TypeModal.accompaniment,
+          containCheckedFilters: numberAccompanimentChecked
+        }"
+        (click)="openModal(TypeModal.accompaniment)"
+        fxLayout="row"
+        fxLayoutAlign="space-between center"
+      >
+        <span class="btnText">Accompagnement</span>
+        <div class="arrow"></div>
+      </button>
+      <button
+        type="button"
+        [ngClass]="{
+          selected: modalTypeOpened === TypeModal.training,
+          containCheckedFilters: numberTrainingChecked
+        }"
+        (click)="openModal(TypeModal.training)"
+        fxLayout="row"
+        fxLayoutAlign="space-between center"
+      >
+        <span class="btnText">Formations</span>
+        <div class="arrow"></div>
+      </button>
+      <button
+        type="button"
+        [ngClass]="{
+          selected: modalTypeOpened === TypeModal.moreFilters,
+          containCheckedFilters: numberMoreFiltersChecked
+        }"
+        (click)="openModal(TypeModal.moreFilters)"
+        fxLayout="row"
+        fxLayoutAlign="space-between center"
+      >
+        <span class="btnText">Plus de filtres</span>
+        <div class="arrow"></div>
+      </button>
+    </div>
+    <div *ngIf="modalTypeOpened">
+      <app-modal-filter
+        [modalType]="modalTypeOpened"
+        [categories]="categories"
+        [modules]="checkedModulesFilter"
+        (searchEvent)="fetchResults($event)"
+        (closeEvent)="closeModal()"
+      ></app-modal-filter>
+    </div>
   </div>
 </div>
 <div class="footerSearchSection" fxLayout="row" fxLayoutAlign="space-between center">

src/app/structure-list/components/search/search.component.ts

@@ -122,17 +122,16 @@ export class SearchComponent implements OnInit {
   public openModal(modalType: TypeModal): void {
     this.categories = [];
     // if modal already closed, reset type
-    if (this.modalTypeOpened === modalType && !this.isOpenModal) {
+    if (this.modalTypeOpened === modalType) {
       this.modalTypeOpened = undefined;
-    } else if (!this.isOpenModal && this.modalTypeOpened !== modalType) {
+    } else if (this.modalTypeOpened !== modalType) {
       this.modalTypeOpened = modalType;
       this.fakeData(modalType);
-      this.isOpenModal = true;
     }
   }
 
   public closeModal(): void {
-    this.isOpenModal = false;
+    //this.openModal(this.modalTypeOpened);
     this.modalTypeOpened = undefined;
   }