fix(multiselet, dropdown): fix change detection on backdrop click

TemainfoSoftware · Oct 27, 2020 · 351acdc · 351acdc
1 parent e249acd
commit 351acdc
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 2 deletions.
diff --git a/projects/truly-ui/src/components/dropdownlist/dropdownlist.html b/projects/truly-ui/src/components/dropdownlist/dropdownlist.html
@@ -31,7 +31,7 @@
   </div>
   <input readonly notform class="ui-hidden-input" [(ngModel)]="value">
   <ng-template cdkConnectedOverlay
-               (backdropClick)="isOpen = false"
+               (backdropClick)="onBackdropClick()"
                [cdkConnectedOverlayHasBackdrop]="true"
                [cdkConnectedOverlayOrigin]="trigger"
                [cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent-backdrop'"

diff --git a/projects/truly-ui/src/components/dropdownlist/dropdownlist.ts b/projects/truly-ui/src/components/dropdownlist/dropdownlist.ts
@@ -210,6 +210,11 @@ export class TlDropDownList extends ValueAccessorBase<any> implements OnInit, On
     }
   }
 
+  onBackdropClick() {
+    this.isOpen = false;
+    this.changes.detectChanges();
+  }
+
   private initializeComponent() {
     this.setUpComponent();
     this.validateData();

diff --git a/projects/truly-ui/src/components/multiselect/multiselect.html b/projects/truly-ui/src/components/multiselect/multiselect.html
@@ -48,7 +48,7 @@
       </div>
     </div>
     <ng-template cdkConnectedOverlay
-                 (backdropClick)="isOpen = false"
+                 (backdropClick)="onBackdropClick()"
                  [cdkConnectedOverlayHasBackdrop]="true"
                  [cdkConnectedOverlayOrigin]="trigger"
                  [cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent-backdrop'"

diff --git a/projects/truly-ui/src/components/multiselect/multiselect.ts b/projects/truly-ui/src/components/multiselect/multiselect.ts
@@ -161,6 +161,11 @@ export class TlMultiSelect extends ValueAccessorBase<any> implements OnInit, Aft
     this.listenControlChanges();
   }
 
+  onBackdropClick() {
+    this.isOpen = false;
+    this.change.detectChanges();
+  }
+
   private listenControlChanges() {
     this.subscription.add(this.control.valueChanges.subscribe(() => {
       this.validateHasModel();

diff --git a/src/app/components/form/modal/form-modal/form-modal.component.html b/src/app/components/form/modal/form-modal/form-modal.component.html
@@ -16,6 +16,19 @@
   <div class="spacer"></div>
   <tl-panelgroup [labelGroup]="'Access Informations'">
     <div class="form-group">
+      <div class="form-group">
+        <tl-multiselect
+          [data]="roles"
+          [labelTag]="'description'"
+          [label]="'Roles'"
+          [keyValue]="'id'"
+          [onlyKeyValue]="true"
+          [labelSize]="100"
+          formControlName="role"
+          [sortAlphabetically]="true"
+          [query]="'description'">
+        </tl-multiselect>
+      </div>
       <div class="form-group">
         <tl-input formControlName="user" showValidations [labelSize]="'100px'" [label]="'User'"></tl-input>
       </div>

diff --git a/src/app/components/form/modal/form-modal/form-modal.component.ts b/src/app/components/form/modal/form-modal/form-modal.component.ts
@@ -21,12 +21,19 @@ import { Validators, FormGroup, FormControl } from '@angular/forms';
 } )
 export class FormModalComponent {
 
+  public roles = [
+      { id: 1, description: 'Administrator'},
+      { id: 2, description: 'Secretary'},
+      { id: 3, description: 'Doctor'},
+  ];
+
   public form = new FormGroup({
     name: new FormControl('',  Validators.required),
     nickname: new FormControl('',  Validators.required),
     email: new FormControl('', [Validators.email, Validators.required]),
     description: new FormControl('', [Validators.required, Validators.minLength(8)]),
     user: new FormControl('', Validators.required),
+    role: new FormControl('', Validators.required),
     password: new FormControl('', [
       Validators.required,
       Validators.minLength(8)