improve focus setting and keystrokes

src/View/ChatPages/messagePage.tsx

@@ -7,12 +7,14 @@ import CoreViewModel from "../../ViewModel/Global/coreViewModel";
 import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel";
 import { ChatMessage } from "../Components/chatMessage";
 import { MessageFilterModal } from "../Modals/messageFilterModal";
+import { setFocusWithDelay } from "../utility";
 
 export function MessagePage(
     coreViewModel: CoreViewModel,
     messagePageViewModel: MessagePageViewModel,
 ) {
     messagePageViewModel.loadData();
+
     const ChatMessageViewModelToView: React.StateItemConverter<
         ChatMessageViewModel
     > = (chatMessageViewModel: ChatMessageViewModel) => {
@@ -49,6 +51,8 @@ export function MessagePage(
     );
     setTimeout(() => scrollDown(true), 100);
 
+    setFocusWithDelay();
+
     return (
         <div id="message-page">
             <div class="pane-wrapper">
@@ -82,6 +86,7 @@ export function MessagePage(
                             <div class="content-width-constraint">
                                 <div class="input-width-constraint">
                                     <input
+                                        id="focused"
                                         bind:value={
                                             messagePageViewModel.composingMessage
                                         }

src/View/Modals/dataTransferModal.tsx

@@ -450,6 +450,7 @@ function TransferDataInputModal(
                                     }
                                 </span>
                                 <input
+                                    on:enter={fileTransferViewModel.prepareReceivingData}
                                     bind:value={
                                         fileTransferViewModel.receivingTransferChannel
                                     }
@@ -467,6 +468,7 @@ function TransferDataInputModal(
                                     }
                                 </span>
                                 <input
+                                    on:enter={fileTransferViewModel.prepareReceivingData}
                                     bind:value={
                                         fileTransferViewModel.receivingTransferKey
                                     }

src/View/Modals/messageFilterModal.tsx

@@ -1,12 +1,10 @@
 import * as React from "bloatless-react";
 
-import SearchViewModel from "../../ViewModel/Utility/searchViewModel";
-import { StringToOption } from "../Components/option";
-import { v4 } from "uuid";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
 import MessagePageViewModel from "../../ViewModel/Pages/messagePageViewModel";
 import { MessageReactionFilterButton } from "../Components/messageReactionFilterButton";
 import { ReactionSymbols } from "../../Model/Chat/chatModel";
+import { setFocusWithDelay } from "../utility";
 
 export function MessageFilterModal<T>(
     coreViewModel: CoreViewModel,
@@ -18,6 +16,8 @@ export function MessageFilterModal<T>(
         () => messagePageViewModel.reactionFilter.value == undefined,
     );
 
+    messagePageViewModel.isFilterModalOpen.subscribe(setFocusWithDelay);
+
     return (
         <div class="modal" toggle:open={messagePageViewModel.isFilterModalOpen}>
             <div>
@@ -30,6 +30,7 @@ export function MessageFilterModal<T>(
                     </h2>
                     <div class="flex-row width-input">
                         <input
+                            id="focused"
                             placeholder={
                                 coreViewModel.translations.general.searchLabel
                             }

src/View/Modals/searchModal.tsx

@@ -4,6 +4,7 @@ import SearchViewModel from "../../ViewModel/Utility/searchViewModel";
 import { StringToOption } from "../Components/option";
 import { v4 } from "uuid";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
+import { setFocusWithDelay } from "../utility";
 
 export function SearchModal<T>(
     coreViewModel: CoreViewModel,
@@ -18,6 +19,8 @@ export function SearchModal<T>(
 
     const suggestionId = v4();
 
+    isOpen.subscribe(setFocusWithDelay);
+
     return (
         <div class="modal" toggle:open={isOpen} extended>
             <div>
@@ -25,6 +28,7 @@ export function SearchModal<T>(
                     <h2>{headline}</h2>
                     <div class="flex-row width-input">
                         <input
+                        id="focused"
                             placeholder={
                                 coreViewModel.translations.general.searchLabel
                             }

src/View/keystrokes.ts

@@ -2,6 +2,7 @@ export enum CommonKeys {
     Home = " ",
     Filter = "=",
     Reset = "-",
+    Options = ".",
     CloseOrCancel = "backspace",
     Apply = "enter",
     Settings = ",",

src/View/utility.ts

@@ -11,6 +11,8 @@ export function reload() {
 }
 
 export function setFocus() {
+    const focusedInModal = document.querySelector(".modal[open] #focused") as HTMLElement;
+    if (focusedInModal) return focusedInModal.focus();
     document.getElementById("focused")?.focus();
 }