fix(modal): corrige fechamento da modal ao selecionar opção no combo

Adicionado stopPropagation ao selecionar uma opção do combo e definido evento mousedown para fechamento da modal

Fixes DTHFUI-1421

Author: Samir Hassan Ayoub

projects/ui/src/lib/components/po-field/po-combo/po-combo.component.html

@@ -58,7 +58,7 @@
   <ul #contentElement class="po-combo-container-content">
     <li *ngFor="let option of visibleOptions"
       [class.po-combo-item-selected]="compareObjects(selectedView, option)"
-      (click)="onOptionClick(option)">
+      (click)="onOptionClick(option, $event)">
       <a class="po-combo-item" [innerHTML]="getLabelFormatted(option?.label)"></a>
     </li>
   </ul>

projects/ui/src/lib/components/po-field/po-combo/po-combo.component.spec.ts

@@ -466,6 +466,14 @@ describe('PoComboComponent:', () => {
 
   describe('Methods:', () => {
 
+    const fakeEvent = {
+      target: {
+        value: 'ab'
+      },
+      preventDefault: () => {},
+      stopPropagation: () => {}
+    };
+
     describe('onKeyUp:', () => {
 
       function fakeKeypressEvent(code: number, target: any = 1) {
@@ -682,13 +690,6 @@ describe('PoComboComponent:', () => {
     });
 
     describe('onKeyDown: ', () => {
-      const fakeEvent = {
-        target: {
-          value: 'ab'
-        },
-        preventDefault: () => {},
-        stopPropagation: () => {}
-      };
 
       it('should call `selectPreviousOption` and not call `selectNextOption`', () => {
         component.comboOpen = true;
@@ -913,6 +914,26 @@ describe('PoComboComponent:', () => {
 
     });
 
+    it('onOptionClick: should call `stopPropagation` if has an event parameter', () => {
+      const option: PoComboOption = { value: 'value', label: 'label' };
+
+      spyOn(fakeEvent, 'stopPropagation');
+
+      component.onOptionClick(option, fakeEvent);
+
+      expect(fakeEvent.stopPropagation).toHaveBeenCalled();
+    });
+
+    it('onOptionClick: shouldn`t call `stopPropagation` if doesn`t have an event parameter', () => {
+      const option: PoComboOption = { value: 'value', label: 'label' };
+
+      spyOn(fakeEvent, 'stopPropagation');
+
+      component.onOptionClick(option);
+
+      expect(fakeEvent.stopPropagation).not.toHaveBeenCalled();
+    });
+
     it('onOptionClick: should call `updateSelectedValue` and `updateComboList` when `option.value` different than `selectedValue`', () => {
       const option: PoComboOption = { value: 'value', label: 'label' };
       component.selectedValue = 'different value';

projects/ui/src/lib/components/po-field/po-combo/po-combo.component.ts

@@ -395,10 +395,14 @@ export class PoComboComponent extends PoComboBaseComponent implements DoCheck, O
     toOpen ? this.open() : this.close();
   }
 
-  onOptionClick(option: PoComboOption) {
+  onOptionClick(option: PoComboOption, event?: any) {
     const inputValue = this.getInputValue();
     const isUpdateModel = (option.value !== this.selectedValue) || !!(this.selectedView && inputValue !== this.selectedView.label);
 
+    if (event) {
+      event.stopPropagation();
+    }
+
     this.updateSelectedValue(option, isUpdateModel);
     this.controlComboVisibility(false);
     this.updateComboList([{ ...this.selectedView }]);

projects/ui/src/lib/components/po-modal/po-modal.component.html

@@ -4,7 +4,7 @@
   (keydown.esc)="closeModalOnEscapeKey($event)">
 
   <div class="po-modal-overlay">
-    <div class="po-modal-container po-pb-2 po-pt-2" (click)="onClickOut($event)">
+    <div class="po-modal-container po-pb-2 po-pt-2" (mousedown)="onClickOut($event)">
 
       <div class="po-modal-vertical-align">
         <div #modalContent

projects/ui/src/lib/components/po-modal/po-modal.component.spec.ts

@@ -507,6 +507,19 @@ describe('PoModalComponent:', () => {
       expect(getModalActionDisabled()).toBeTruthy();
       expect(getModalActionIconLoading()).toBeTruthy();
     });
+
+    it('should call `onClickOut` on mousedown', () => {
+      component.open();
+      fixture.detectChanges();
+
+      const containerElement = fixture.debugElement.query(By.css('.po-modal-container')).nativeElement;
+
+      spyOn(component, 'onClickOut');
+
+      containerElement.dispatchEvent(new Event('mousedown'));
+
+      expect(component.onClickOut).toHaveBeenCalled();
+    });
   });
 
 });