From de4c556edf0a43284624d11ba4ee4ffcfeb8a9f8 Mon Sep 17 00:00:00 2001
From: "mathias.chouet" <mathias.chouet@irstea.fr>
Date: Thu, 27 Aug 2020 12:03:56 +0200
Subject: [PATCH] Work on #431 - do not capture Tab events

---
 .../ngparam-input/ngparam-input.component.ts  | 21 +++++++++++++++++--
 .../pab-table/pab-table.component.html        |  2 +-
 .../pab-table/pab-table.component.ts          |  2 +-
 .../param-field-line.component.html           |  2 +-
 .../param-field-line.component.ts             |  4 ++++
 5 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/app/components/ngparam-input/ngparam-input.component.ts b/src/app/components/ngparam-input/ngparam-input.component.ts
index 81db20827..cbaf4e2fd 100644
--- a/src/app/components/ngparam-input/ngparam-input.component.ts
+++ b/src/app/components/ngparam-input/ngparam-input.component.ts
@@ -1,6 +1,6 @@
 // cf. https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html
 
-import { Component, ChangeDetectorRef, OnDestroy } from "@angular/core";
+import { Component, ChangeDetectorRef, OnDestroy, Input, ElementRef } from "@angular/core";
 
 import { Message, Observer } from "jalhyd";
 
@@ -17,6 +17,10 @@ import { ApplicationSetupService } from "../../services/app-setup.service";
     ]
 })
 export class NgParamInputComponent extends GenericInputComponentDirective implements Observer, OnDestroy {
+
+    @Input()
+    public captureTabEvents: boolean;
+
     /**
      * paramètre géré
      */
@@ -33,9 +37,11 @@ export class NgParamInputComponent extends GenericInputComponentDirective implem
     constructor(
         intlService: I18nService,
         appSetupService: ApplicationSetupService,
-        cdRef: ChangeDetectorRef
+        cdRef: ChangeDetectorRef,
+        private element: ElementRef
     ) {
         super(cdRef, intlService, appSetupService);
+        this.captureTabEvents = true;
     }
 
     /**
@@ -114,6 +120,17 @@ export class NgParamInputComponent extends GenericInputComponentDirective implem
         }
     }
 
+    /**
+     * Renvoie l'événement au composant du dessus
+     */
+    public onTabPressed(event, shift: boolean) {
+        this.tabPressed.emit({ originalEvent: event, shift: shift });
+        // stop event propagation ?
+        if (this.captureTabEvents) {
+            return false;
+        } // else let it bubble !
+    }
+
     public ngOnDestroy() {
         this._paramDef.removeObserver(this);
     }
diff --git a/src/app/components/pab-table/pab-table.component.html b/src/app/components/pab-table/pab-table.component.html
index 777573a7f..488fe6565 100644
--- a/src/app/components/pab-table/pab-table.component.html
+++ b/src/app/components/pab-table/pab-table.component.html
@@ -101,7 +101,7 @@
                             {{ cell.title }}
                         </div>
                         <param-field-line class="qaFieldLine" [param]="cell.model" (radio)="inputValueChanged($event, cell)"
-                            (input)="inputValueChanged($event, cell)">
+                            (input)="inputValueChanged($event, cell)" [captureTabEvents]="false">
                         </param-field-line>
                     </div>
 
diff --git a/src/app/components/pab-table/pab-table.component.ts b/src/app/components/pab-table/pab-table.component.ts
index bacee1c96..5f8455f9a 100644
--- a/src/app/components/pab-table/pab-table.component.ts
+++ b/src/app/components/pab-table/pab-table.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, Output, EventEmitter, OnInit, AfterViewInit } from "@angular/core";
 
-import { LoiDebit, ParamCalculability } from "jalhyd";
+import { LoiDebit } from "jalhyd";
 
 import { MatDialog } from "@angular/material/dialog";
 
diff --git a/src/app/components/param-field-line/param-field-line.component.html b/src/app/components/param-field-line/param-field-line.component.html
index 1143ac972..e1faeebf2 100644
--- a/src/app/components/param-field-line/param-field-line.component.html
+++ b/src/app/components/param-field-line/param-field-line.component.html
@@ -4,7 +4,7 @@
     <div fxFlex="1 0 120px">
         <!-- composant pour gérer le cas général (valeur numérique à saisir) -->
         <ngparam-input [title]="param.title" [hidden]="! isRadioFixChecked" (change)="onInputChange($event)"
-            (tabPressed)="onTabPressed($event)">
+            (tabPressed)="onTabPressed($event)" [captureTabEvents]="captureTabEvents">
         </ngparam-input>
 
         <!-- composant pour gérer le cas "paramètre calculé" -->
diff --git a/src/app/components/param-field-line/param-field-line.component.ts b/src/app/components/param-field-line/param-field-line.component.ts
index 614521e14..f76d819c2 100644
--- a/src/app/components/param-field-line/param-field-line.component.ts
+++ b/src/app/components/param-field-line/param-field-line.component.ts
@@ -26,6 +26,7 @@ export class ParamFieldLineComponent implements OnChanges {
         this._formService = ServiceFactory.formulaireService;
         this.valid = new EventEmitter();
         this.inputChange = new EventEmitter();
+        this.captureTabEvents = true;
     }
 
     public get uitextParamFixe() {
@@ -86,6 +87,9 @@ export class ParamFieldLineComponent implements OnChanges {
     @Input()
     public param: NgParameter;
 
+    @Input()
+    public captureTabEvents: boolean;
+
     @ViewChild(NgParamInputComponent, { static: true })
     private _ngParamInputComponent: NgParamInputComponent;
 
-- 
GitLab