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..4e171c87b --- /dev/null +++ b/frontend/src/utils/form/enter-is-tab.js @@ -0,0 +1,53 @@ +import { Utility } from '../../core/utility'; + +const ENTER_IS_TAB_INITIALIZED_CLASS = 'enter-as-tab--initialized'; +const AREA_SELECTOR = 'input, textarea'; + +@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; + + 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('keydown', (e) => { + if(e.key === 'Enter') { + e.preventDefault(); + let currentInputFieldId = this._element.id; + let inputAreas = document.querySelectorAll(AREA_SELECTOR); + let nextInputArea = null; + for (let i = 0; i < inputAreas.length; i++) { + if(inputAreas[i].id === currentInputFieldId) { + nextInputArea = inputAreas[i+1]; + break; + } + } + + if(nextInputArea) { + nextInputArea.focus(); + } + } + }); + } + + destroy() { + console.log('TBD: Destroy EnterIsTab'); + } +} \ 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 ]; diff --git a/src/Handler/Utils/Communication.hs b/src/Handler/Utils/Communication.hs index c5575a65b..27a8e31a0 100644 --- a/src/Handler/Utils/Communication.hs +++ b/src/Handler/Utils/Communication.hs @@ -209,7 +209,7 @@ commR CommunicationRoute{..} = do ((commRes,commWdgt),commEncoding) <- runFormPost . identifyForm FIDCommunication . withButtonForm' universeF . renderAForm FormStandard $ Communication <$> recipientAForm <* aformMessage recipientsListMsg - <*> aopt textField (fslI MsgCommSubject) Nothing + <*> aopt textField (fslI MsgCommSubject & addAttr "uw-enter-as-tab" "") Nothing <*> (markupOutput <$> areq htmlField (fslI MsgCommBody) Nothing) formResult commRes $ \case (comm, BtnCommunicationSend) -> do