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:
parent
fd6822c7b7
commit
7aeb8e61f4
@ -1,6 +1,6 @@
|
|||||||
import * as toposort from 'toposort';
|
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 {
|
export class UtilRegistry {
|
||||||
|
|
||||||
|
|||||||
44
frontend/src/utils/form/enter-is-tab.js
Normal file
44
frontend/src/utils/form/enter-is-tab.js
Normal 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');
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -7,6 +7,7 @@ import { FormErrorReporter } from './form-error-reporter';
|
|||||||
import { InteractiveFieldset } from './interactive-fieldset';
|
import { InteractiveFieldset } from './interactive-fieldset';
|
||||||
import { NavigateAwayPrompt } from './navigate-away-prompt';
|
import { NavigateAwayPrompt } from './navigate-away-prompt';
|
||||||
import { CommunicationRecipients } from './communication-recipients';
|
import { CommunicationRecipients } from './communication-recipients';
|
||||||
|
import { EnterIsTab } from './enter-is-tab';
|
||||||
|
|
||||||
export const FormUtils = [
|
export const FormUtils = [
|
||||||
AutoSubmitButton,
|
AutoSubmitButton,
|
||||||
@ -17,5 +18,6 @@ export const FormUtils = [
|
|||||||
InteractiveFieldset,
|
InteractiveFieldset,
|
||||||
NavigateAwayPrompt,
|
NavigateAwayPrompt,
|
||||||
CommunicationRecipients,
|
CommunicationRecipients,
|
||||||
|
EnterIsTab,
|
||||||
// ReactiveSubmitButton // not used currently
|
// ReactiveSubmitButton // not used currently
|
||||||
];
|
];
|
||||||
|
|||||||
Reference in New Issue
Block a user