From 4b8490a2d1ae97a87af8027a44d0d2fd09661af6 Mon Sep 17 00:00:00 2001
From: Georg Gadinger <nilsding@nilsding.org>
Date: Tue, 11 Oct 2022 22:08:59 +0200
Subject: [PATCH] auto-foxus text field in ask modal

resolves #557
---
 app/javascript/packs/application.ts            |  4 ++--
 .../retrospring/features/questionbox/all.ts    | 10 +++++++---
 .../retrospring/features/questionbox/index.ts  | 18 +++++++++++-------
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/app/javascript/packs/application.ts b/app/javascript/packs/application.ts
index 7b6b73c1..69e4d7db 100644
--- a/app/javascript/packs/application.ts
+++ b/app/javascript/packs/application.ts
@@ -20,10 +20,10 @@ document.addEventListener('DOMContentLoaded', initInbox);
 document.addEventListener('DOMContentLoaded', initUser);
 document.addEventListener('turbo:load', initSettings);
 document.addEventListener('DOMContentLoaded', initLists);
-document.addEventListener('DOMContentLoaded', initQuestionbox);
+document.addEventListener('turbo:load', initQuestionbox);
 document.addEventListener('DOMContentLoaded', initQuestion);
 document.addEventListener('DOMContentLoaded', initModeration);
 document.addEventListener('DOMContentLoaded', initMemes);
 document.addEventListener('turbo:load', initAnnouncements);
 document.addEventListener('turbo:load', initLocales);
-document.addEventListener('turbo:load', initFront);
\ No newline at end of file
+document.addEventListener('turbo:load', initFront);
diff --git a/app/javascript/retrospring/features/questionbox/all.ts b/app/javascript/retrospring/features/questionbox/all.ts
index 6b621165..1e01aa81 100644
--- a/app/javascript/retrospring/features/questionbox/all.ts
+++ b/app/javascript/retrospring/features/questionbox/all.ts
@@ -12,7 +12,7 @@ export function questionboxAllHandler(event: Event): void {
     body: {
       rcpt: 'followers',
       question: document.querySelector<HTMLInputElement>('textarea[name=qb-all-question]').value,
-      anonymousQuestion: 'false'      
+      anonymousQuestion: 'false'
     },
     contentType: 'application/json'
   })
@@ -23,7 +23,7 @@ export function questionboxAllHandler(event: Event): void {
         document.querySelector<HTMLInputElement>('textarea[name=qb-all-question]').value = '';
         window['$']('#modal-ask-followers').modal('hide');
       }
-      
+
       showNotification(data.message, data.success);
     })
     .catch(err => {
@@ -40,4 +40,8 @@ export function questionboxAllInputHandler(event: KeyboardEvent): void {
   if (event.keyCode == 13 && (event.ctrlKey || event.metaKey)) {
     document.querySelector<HTMLButtonElement>(`button[name=qb-all-ask]`).click();
   }
-}
\ No newline at end of file
+}
+
+export function questionboxAllModalAutofocus(): void {
+  document.querySelector<HTMLInputElement>('textarea[name=qb-all-question]').focus();
+}
diff --git a/app/javascript/retrospring/features/questionbox/index.ts b/app/javascript/retrospring/features/questionbox/index.ts
index 86225f48..a2b7b3e9 100644
--- a/app/javascript/retrospring/features/questionbox/index.ts
+++ b/app/javascript/retrospring/features/questionbox/index.ts
@@ -1,13 +1,17 @@
 import registerEvents from 'utilities/registerEvents';
-import { questionboxAllHandler, questionboxAllInputHandler } from './all';
+import { questionboxAllHandler, questionboxAllInputHandler, questionboxAllModalAutofocus } from './all';
 import { questionboxPromoteHandler, questionboxUserHandler, questionboxUserInputHandler } from './user';
 
 export default (): void => {
   registerEvents([
-    { type: 'click', target: '[name=qb-ask]', handler: questionboxUserHandler, global: true },
-    { type: 'click', target: '#new-question', handler: questionboxPromoteHandler, global: true },
-    { type: 'click', target: '[name=qb-all-ask]', handler: questionboxAllHandler, global: true },
-    { type: 'keydown', target: '[name=qb-question]', handler: questionboxUserInputHandler, global: true },
-    { type: 'keydown', target: '[name=qb-all-question]', handler: questionboxAllInputHandler, global: true }
+    { type: 'click', target: document.querySelectorAll('[name=qb-ask]'), handler: questionboxUserHandler },
+    { type: 'click', target: document.querySelector('#new-question'), handler: questionboxPromoteHandler },
+    { type: 'click', target: document.querySelectorAll('[name=qb-all-ask]'), handler: questionboxAllHandler },
+    { type: 'keydown', target: document.querySelectorAll('[name=qb-question]'), handler: questionboxUserInputHandler },
+    { type: 'keydown', target: document.querySelectorAll('[name=qb-all-question]'), handler: questionboxAllInputHandler }
   ]);
-}
\ No newline at end of file
+
+  // unfortunately Bootstrap 4 relies on jQuery's event model, so I can't use registerEvents here :(
+  // TODO: when upgrading to Bootstrap 5 replace this with a normal DOM event
+  $('#modal-ask-followers').on('shown.bs.modal', questionboxAllModalAutofocus);
+}