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
This commit is contained in:
Johannes Eder 2021-05-25 12:14:13 +02:00
parent fd6822c7b7
commit 7aeb8e61f4
3 changed files with 47 additions and 1 deletions

View File

@ -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 {

View File

@ -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');
}
}

View File

@ -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
];