From 7aeb8e61f46dcc5c918df20450df2fdf1d10f217 Mon Sep 17 00:00:00 2001
From: Johannes Eder <ederj@cip.ifi.lmu.de>
Date: Tue, 25 May 2021 12:14:13 +0200
Subject: [PATCH] fix: changed enter to tab behavior in CCommR

added a new utility that looks for [uw-enter-as-tab] and attaches a listener to this field
---
 .../services/util-registry/util-registry.js   |  2 +-
 frontend/src/utils/form/enter-is-tab.js       | 44 +++++++++++++++++++
 frontend/src/utils/form/form.js               |  2 +
 3 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/utils/form/enter-is-tab.js

diff --git a/frontend/src/services/util-registry/util-registry.js b/frontend/src/services/util-registry/util-registry.js
index 65e9326cc..507331135 100644
--- a/frontend/src/services/util-registry/util-registry.js
+++ b/frontend/src/services/util-registry/util-registry.js
@@ -1,6 +1,6 @@
 import * as toposort from 'toposort';
 
-const DEBUG_MODE = /localhost/.test(window.location.href) ? 1 : 0;
+const DEBUG_MODE = 3;///localhost/.test(window.location.href) ? 1 : 0;
 
 export class UtilRegistry {
 
diff --git a/frontend/src/utils/form/enter-is-tab.js b/frontend/src/utils/form/enter-is-tab.js
new file mode 100644
index 000000000..35d9481b1
--- /dev/null
+++ b/frontend/src/utils/form/enter-is-tab.js
@@ -0,0 +1,44 @@
+import { Utility } from '../../core/utility';
+
+const ENTER_IS_TAB_INITIALIZED_CLASS = 'enter-as-tab--initialized';
+//Frage: diese ID ok? Oder lieber mit einem Query slector?
+const FORM_GROUP_INPUT_ID = 'hident29';
+
+@Utility({
+    selector: '[uw-enter-as-tab]',
+  })
+
+export class EnterIsTab {
+    _element;
+
+    constructor(element) {
+
+        if(!element) {
+            throw new Error('EnterIsTab Utility cannot be setup without a field element');
+        }
+
+        this._element = element;
+        
+        //Frage: Brauche ich diese Klasse?
+        if (this._element.classList.contains(ENTER_IS_TAB_INITIALIZED_CLASS)) {
+            return false;
+        }
+
+        this._element.classList.add(ENTER_IS_TAB_INITIALIZED_CLASS);
+    }
+
+
+    start() {
+        this._element.addEventListener('keypress', (e) => {
+            if(e.key === 'Enter') {
+                e.preventDefault();
+                let messageArea = document.getElementById(FORM_GROUP_INPUT_ID);
+                messageArea.focus();
+            }
+        });
+    }
+
+    destroy() {
+        console.log('TBD: Destroy Alert');
+      }
+}
\ No newline at end of file
diff --git a/frontend/src/utils/form/form.js b/frontend/src/utils/form/form.js
index 2327ca1db..723f4c9e8 100644
--- a/frontend/src/utils/form/form.js
+++ b/frontend/src/utils/form/form.js
@@ -7,6 +7,7 @@ import { FormErrorReporter } from './form-error-reporter';
 import { InteractiveFieldset } from './interactive-fieldset';
 import { NavigateAwayPrompt } from './navigate-away-prompt';
 import { CommunicationRecipients } from './communication-recipients';
+import { EnterIsTab } from './enter-is-tab';
 
 export const FormUtils = [
   AutoSubmitButton,
@@ -17,5 +18,6 @@ export const FormUtils = [
   InteractiveFieldset,
   NavigateAwayPrompt,
   CommunicationRecipients,
+  EnterIsTab,
   // ReactiveSubmitButton // not used currently
 ];