Input Cursor movement with arrow and enter keys

Pages/AccountPage.razor

@@ -10,14 +10,15 @@
 @inject PageHistoryManager PageHistoryManager
 @inject ReportDataProvider ReportDataProvider
 @inject Toaster Toaster
-@inject InputCursorHandler InputCursorHandler;
+@inject InputCursorHandler InputCursorHandler
 
 
 <div class="row px-3 h-100">
     <div class="row no-gutters align-items-start w-100">
         <div class="row no-gutters align-items-center w-100" style="padding-top:2em">
             <div class="col-12">
-                <MatSelect Class="w-100 required" Label="@I18n["Salutation"]" Outlined="true" @bind-Value="@Account.Salutation" Style="margin-bottom: 0.5rem" Required="true">
+                <MatSelect Class="w-100 required" Label="@I18n["Salutation"]" Outlined="true" @bind-Value="@Account.Salutation" Style="margin-bottom: 0.5rem" Required="true" 
+                 @onkeydown="InputCursorHandler.OnKeyDownHandlerAsync">
                     <MatOptionString Value="M">@I18n["Male"]</MatOptionString>
                     <MatOptionString Value="F">@I18n["Female"]</MatOptionString>
                 </MatSelect>
@@ -26,39 +27,39 @@
         <div class="row no-gutters w-100">
             <div class="col-6" style="padding-right:0.5em">
                 <MatStringField Class="w-100" Label="@I18n["Firstname"]" Outlined="true" type="text" @bind-Value="@Account.Firstname" Required="true"
-                 OnKeyDown="@InputCursorHandler.OnKeyPressHandlerAsync"></MatStringField>
+                 OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
             </div>
             <div class="col-6" style="padding-left:0.5em">
                 <MatStringField Class="w-100" Label="@I18n["Lastname"]" Outlined="true" type="text" @bind-Value="@Account.Lastname" Required="true"
-                 OnKeyDown="@InputCursorHandler.OnKeyPressHandlerAsync"></MatStringField>
+                 OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
             </div>
         </div>
         <div class="row no-gutters align-items-center w-100">
             <div class="col-12">
                 <MatStringField Class="w-100" Label="@I18n["Address"]" Outlined="true" type="text" @bind-Value="@Account.Address"
-                 OnKeyDown="@InputCursorHandler.OnKeyPressHandlerAsync"></MatStringField>
+                 OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
             </div>
         </div>
         <div class="row no-gutters align-items-center w-100">
             <div class="col-4" style="padding-right:0.5em">
                 <MatStringField Class="w-100" Label="@I18n["Zip"]" Outlined="true" type="text" @bind-Value="@Account.Zip"
-                 OnKeyDown="@InputCursorHandler.OnKeyPressHandlerAsync"></MatStringField>
+                 OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
             </div>
             <div class="col-8" style="padding-left:0.5em">
                 <MatStringField Class="w-100" Label="@I18n["City"]" Outlined="true" type="text" @bind-Value="@Account.City"
-                 OnKeyDown="@InputCursorHandler.OnKeyPressHandlerAsync"></MatStringField>
+                 OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
             </div>
         </div>
         <div class="row no-gutters align-items-center w-100">
             <div class="col-12">
                 <MatStringField Class="w-100" Label="@I18n["Phone"]" Outlined="true" type="text" @bind-Value="@Account.Phone" Required="true"
-                 OnKeyDown="@InputCursorHandler.OnKeyPressHandlerAsync"></MatStringField>
+                 OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
             </div>
         </div>
         <div class="row no-gutters align-items-center w-100">
             <div class="col-12">
                 <MatStringField Class="w-100" Label="@I18n["Mail"]" Outlined="true" type="text" @bind-Value="@Account.Email"
-                 OnKeyDown="@InputCursorHandler.OnKeyPressHandlerAsync"></MatStringField>
+                 OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
             </div>
         </div>
     </div>
@@ -120,12 +121,17 @@
     }
 
     private async Task SaveUserData() {
+        Validator.ValidateAccount(Account);
         await UserDataProvider.Save(Account);
     }
 
     private async void SaveUserDataAndClose() {
-        await SaveUserData();
-        NavigationManager.NavigateTo("caritas_services");
+        try {
+            await SaveUserData();
+            NavigationManager.NavigateTo("caritas_services");
+        } catch (ArgumentException) {
+            Toaster.ShowWarning(I18n.GetString("Warning.MandatoryFields.Title"), I18n.GetString("Warning.MandatoryFields.Msg"));
+        }
     }
 
     private async Task<UserData> GetUserData() {

Pages/Fundvelo/CaritasServiceFundVeloAlternatePickupContactPage.razor

@@ -9,6 +9,7 @@
 @inject PageHistoryManager PageHistoryManager
 @inject ReportDataProvider ReportDataProvider
 @inject Toaster Toaster
+@inject InputCursorHandler InputCursorHandler;
 
 
 <div class="row px-3 h-100">
@@ -23,7 +24,8 @@
     <div class="row no-gutters align-items-start w-100">
         <div class="row no-gutters w-100">
             <div class="col-12">
-                <MatSelect Class="w-100 required" Label="@I18n["Salutation"]" Outlined="true" @bind-Value="pucSalutation" Required="true" Style="margin-bottom: 0.5rem">
+                <MatSelect Class="w-100 required" Label="@I18n["Salutation"]" Outlined="true" @bind-Value="pucSalutation" Required="true" Style="margin-bottom: 0.5rem"
+                 @onkeydown="InputCursorHandler.OnKeyDownHandlerAsync">
                     <MatOptionString Value="M">@I18n["Male"]</MatOptionString>
                     <MatOptionString Value="F">@I18n["Female"]</MatOptionString>
                 </MatSelect>
@@ -31,38 +33,46 @@
         </div>
         <div class="row no-gutters w-100">
             <div class="col-6" style="padding-right:0.5em">
-                <MatStringField Class="w-100" Label="@I18n["Firstname"]" Outlined="true" type="text" @bind-Value="pucFirstname" Required="true"></MatStringField>
+                <MatStringField Class="w-100" Label="@I18n["Firstname"]" Outlined="true" type="text" @bind-Value="pucFirstname" Required="true"
+                 OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
             </div>
             <div class="col-6" style="padding-left:0.5em">
-                <MatStringField Class="w-100" Label="@I18n["Lastname"]" Outlined="true" type="text" @bind-Value="pucLastname" Required="true"></MatStringField>
+                <MatStringField Class="w-100" Label="@I18n["Lastname"]" Outlined="true" type="text" @bind-Value="pucLastname" Required="true"
+                 OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
             </div>
         </div>
         <div class="row no-gutters align-items-center w-100">
             <div class="col-12">
-                <MatStringField Class="w-100" Label="@I18n["Address"]" Outlined="true" type="text" @bind-Value="pucAddress" Required="true"></MatStringField>
+                <MatStringField Class="w-100" Label="@I18n["Address"]" Outlined="true" type="text" @bind-Value="pucAddress" Required="true"
+                 OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
             </div>
         </div>
         <div class="row no-gutters align-items-center w-100">
             <div class="col-4" style="padding-right:0.5em">
-                <MatStringField Class="w-100" Label="@I18n["Zip"]" Outlined="true" type="text" @bind-Value="pucZip" Required="true"></MatStringField>
+                <MatStringField Class="w-100" Label="@I18n["Zip"]" Outlined="true" type="text" @bind-Value="pucZip" Required="true"
+                 OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
             </div>
             <div class="col-8" style="padding-left:0.5em">
-                <MatStringField Class="w-100" Label="@I18n["City"]" Outlined="true" type="text" @bind-Value="pucCity" Required="true"></MatStringField>
+                <MatStringField Class="w-100" Label="@I18n["City"]" Outlined="true" type="text" @bind-Value="pucCity" Required="true"
+                 OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
             </div>
         </div>
         <div class="row no-gutters align-items-center w-100">
             <div class="col-12">
-                <MatStringField Class="w-100" Label="@I18n["Mobile"]" Outlined="true" type="text" @bind-Value="pucMobile"></MatStringField>
+                <MatStringField Class="w-100" Label="@I18n["Mobile"]" Outlined="true" type="text" @bind-Value="pucMobile"
+                 OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
             </div>
         </div>
         <div class="row no-gutters align-items-center w-100">
             <div class="col-12">
-                <MatStringField Class="w-100" Label="@I18n["Phone"]" Outlined="true" type="text" @bind-Value="pucPhone"></MatStringField>
+                <MatStringField Class="w-100" Label="@I18n["Phone"]" Outlined="true" type="text" @bind-Value="pucPhone"
+                 OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
             </div>
         </div>
         <div class="row no-gutters align-items-center w-100">
             <div class="col-12">
-                <MatStringField Class="w-100" Label="@I18n["Mail"]" Outlined="true" type="text" @bind-Value="pucEmail"></MatStringField>
+                <MatStringField Class="w-100" Label="@I18n["Mail"]" Outlined="true" type="text" @bind-Value="pucEmail"
+                 OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
             </div>
         </div>
     </div>

Pages/Fundvelo/CaritasServiceFundVeloFoundKeyDataPage.razor

@@ -17,6 +17,7 @@
 @inject IJSRuntime JS
 @inject ReportDataProvider ReportDataProvider
 @inject OnlineStatusProvider OnlineStatusProvider
+@inject InputCursorHandler InputCursorHandler;
 
 <div class="row px-3 h-100">
     <div class="row no-gutters align-items-center justify-content-center w-100" style="padding-top:1em">
@@ -104,16 +105,20 @@
                 <div class="mat-layout-grid-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-8-tablet mat-layout-grid-cell-span-4-desktop">
                     <div class="mat-layout-grid-inner">
                         <div class="mat-layout-grid-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-4-tablet mat-layout-grid-cell-span-12-desktop">
-                            <MatStringField Class="w-100 form-check-label" Label="@getAddressLbl()" Outlined="true" Required="true" Type="text" @bind-Value="@bicycleGeoPosition.Address"></MatStringField>
+                            <MatStringField Class="w-100 form-check-label" Label="@getAddressLbl()" Outlined="true" Required="true" Type="text" @bind-Value="@bicycleGeoPosition.Address"
+                             OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
                         </div>
                         <div class="mat-layout-grid-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-4-tablet mat-layout-grid-cell-span-12-desktop">
-                            <MatStringField Class="w-100 form-check-label" Label="@I18n["PlaceOfDiscovery"]" Outlined="true" Required="true" type="text" @bind-Value="@bicycleGeoPosition.DisplayCity"></MatStringField>
+                            <MatStringField Class="w-100 form-check-label" Label="@I18n["PlaceOfDiscovery"]" Outlined="true" Required="true" type="text" @bind-Value="@bicycleGeoPosition.DisplayCity"
+                             OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
                         </div>
                         <div class="mat-layout-grid-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-4-tablet mat-layout-grid-cell-span-12-desktop">
-                            <MatTextField Class="w-100 form-check-label italic" Label="@I18n["Latitude"]" Outlined="true" ReadOnly="true" @bind-Value="@bicycleGeoPosition.Latitude"></MatTextField>
+                            <MatTextField Class="w-100 form-check-label italic" Label="@I18n["Latitude"]" Outlined="true" ReadOnly="true" @bind-Value="@bicycleGeoPosition.Latitude"
+                             OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatTextField>
                         </div>
                         <div class="mat-layout-grid-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-4-tablet mat-layout-grid-cell-span-12-desktop">
-                            <MatTextField Class="w-100 form-check-label italic" Label="@I18n["Longitude"]" Outlined="true" ReadOnly="true" @bind-Value="@bicycleGeoPosition.Longitude"></MatTextField>
+                            <MatTextField Class="w-100 form-check-label italic" Label="@I18n["Longitude"]" Outlined="true" ReadOnly="true" @bind-Value="@bicycleGeoPosition.Longitude"
+                             OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatTextField>
                         </div>
                     </div>
                 </div>
@@ -121,7 +126,8 @@
                 <div class="mat-layout-grid-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-8-tablet mat-layout-grid-cell-span-12-desktop">
                     <div class="mat-layout-grid-inner">
                         <div class="mat-layout-grid-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-4-tablet mat-layout-grid-cell-span-4-desktop">
-                            <MatSelectValue Class="required" FullWidth="true" Outlined="true" Label="@I18n["Color"]" @bind-Value="selectedColor" Items="@Colors" ValueSelector="@(i=>i)">
+                            <MatSelectValue Class="required" FullWidth="true" Outlined="true" Label="@I18n["Color"]" @bind-Value="selectedColor" Items="@Colors" ValueSelector="@(i=>i)"
+                             @onkeydown="InputCursorHandler.OnKeyDownHandlerAsync">
                                 <ItemTemplate>
                                     <div>
                                         <span class="btn-sm" style="background-color:@context.Code;
@@ -135,7 +141,8 @@
                         </div>
                         <div class="mat-layout-grid-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-4-tablet mat-layout-grid-cell-span-4-desktop">
                             <div class="outlined">
-                                <MatAutocompleteList TItem="Brand" FullWidth="true" Label="@I18n["Brand"]" Required="true" Items="@Brands" OnTextChanged="setBrandValue" @bind-Value="SelectedBrand" CustomStringSelector="@(i => i?.Bezeichnung)">
+                                <MatAutocompleteList TItem="Brand" FullWidth="true" Label="@I18n["Brand"]" Required="true" Items="@Brands" OnTextChanged="setBrandValue" @bind-Value="SelectedBrand" CustomStringSelector="@(i => i?.Bezeichnung)"
+                                 ShowClearButton="true" NumberOfElementsInPopup="6" @onkeydown="InputCursorHandler.OnKeyDownHandlerAsync">
                                     <ItemTemplate>
                                         <div>
                                             <span>@context?.Bezeichnung</span>
@@ -145,7 +152,8 @@
                             </div>
                         </div>
                         <div class="mat-layout-grid-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-4-tablet mat-layout-grid-cell-span-4-desktop">
-                            <MatSelectValue Class="required" FullWidth="true" Outlined="true" Label="@I18n["Type"]" @bind-Value="selectedBcType" Items="@BicycleTypes" ValueSelector="@(i=>i)">
+                            <MatSelectValue Class="required" FullWidth="true" Outlined="true" Label="@I18n["Type"]" @bind-Value="selectedBcType" Items="@BicycleTypes" ValueSelector="@(i=>i)"
+                             @onkeydown="InputCursorHandler.OnKeyDownHandlerAsync">
                                 <ItemTemplate>
                                     <div>
                                         <span>@context?.Bezeichnung</span>
@@ -155,17 +163,20 @@
                         </div>
                         <div class="mat-layout-grid-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-4-tablet mat-layout-grid-cell-span-4-desktop">
                             <div class="mat-layout-grid-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-4-tablet mat-layout-grid-cell-span-12-desktop">
-                                <MatStringField Class="w-100 form-check-label" Label="@I18n["FrameNumber"]" Outlined="true" type="text" @bind-Value="frameNumber"></MatStringField>
+                                <MatStringField Class="w-100 form-check-label" Label="@I18n["FrameNumber"]" Outlined="true" type="text" @bind-Value="frameNumber"
+                                 OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
                             </div>
                         </div>
                         <div class="mat-layout-grid-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-4-tablet mat-layout-grid-cell-span-4-desktop">
                             <div class="mat-layout-grid-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-4-tablet mat-layout-grid-cell-span-12-desktop">
-                                <MatStringField Class="w-100 form-check-label" Label="@I18n["Remark"]" Outlined="true" type="text" @bind-Value="remark"></MatStringField>
+                                <MatStringField Class="w-100 form-check-label" Label="@I18n["Remark"]" Outlined="true" type="text" @bind-Value="remark"
+                                 OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
                             </div>
                         </div>
                         <div class="mat-layout-grid-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-4-tablet mat-layout-grid-cell-span-4-desktop">
                             <div>
-                                <MatCheckbox @bind-Value="@abholadresseIsNotContact" Label="@I18n["AlternatePickupContact"]"></MatCheckbox>
+                                <MatCheckbox @bind-Value="@abholadresseIsNotContact" Label="@I18n["AlternatePickupContact"]"
+                                 @onkeydown="InputCursorHandler.OnKeyDownHandlerAsync"></MatCheckbox>
                             </div>
                         </div>
                     </div>
@@ -229,7 +240,7 @@
         MouseEvent mouseEvent = new MouseEvent();
         LatLng coordinates;
         LatLng devicePosition = await InitializeDeviceMapPosition();
-        if (report != null && ((report.GeographicInfo.Latitude != 0 && report.GeographicInfo.Longitude != 0) || 
+        if (report != null && ((report.GeographicInfo.Latitude != 0 && report.GeographicInfo.Longitude != 0) ||
             (ReportDataProvider.ReportRepositoryItem != null && ReportDataProvider.ReportRepositoryItem.ID != 0))) {
             bicycleGeoPosition.DisplayCity = await GetFormattedAddressZipAndTown(ReportDataProvider);
             coordinates = new LatLng(report.GeographicInfo.Latitude, report.GeographicInfo.Longitude);

Pages/Fundvelo/CaritasServiceFundVeloMissingKeyDataPage.razor

@@ -15,6 +15,7 @@
 @inject Toaster Toaster
 @inject IJSRuntime JS
 @inject ReportDataProvider ReportDataProvider
+@inject InputCursorHandler InputCursorHandler;
 
 <div class="row px-3 h-100">
     <div class="row no-gutters align-items-center justify-content-center w-100" style="padding-top:1em">
@@ -70,7 +71,8 @@
                 <div class="mat-layout-grid-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-4-tablet mat-layout-grid-cell-span-4-desktop">
                     <div class="mat-layout-grid-inner">
                         <div class="mat-layout-grid-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-8-tablet mat-layout-grid-cell-span-12-desktop">
-                            <MatSelectValue Class="required" FullWidth="true" Outlined="true" Label="@I18n["Color"]" @bind-Value="selectedColor" Items="@Colors" ValueSelector="@(i=>i)">
+                            <MatSelectValue Class="required" FullWidth="true" Outlined="true" Label="@I18n["Color"]" @bind-Value="selectedColor" Items="@Colors" ValueSelector="@(i=>i)"
+                             @onkeydown="InputCursorHandler.OnKeyDownHandlerAsync">
                                 <ItemTemplate>
                                     <div>
                                         <span class="btn-sm" style="background-color:@context.Code;
@@ -84,7 +86,8 @@
                         </div>
                         <div class="mat-layout-grid-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-8-tablet mat-layout-grid-cell-span-12-desktop">
                             <div class="outlined">
-                                <MatAutocompleteList TItem="Brand" FullWidth="true" Label="@I18n["Brand"]" Items="@Brands" OnTextChanged="setBrandValue" @bind-Value="SelectedBrand" CustomStringSelector="@(i => i?.Bezeichnung)" Required="true">
+                                <MatAutocompleteList TItem="Brand" FullWidth="true" Label="@I18n["Brand"]" Items="@Brands" OnTextChanged="setBrandValue" @bind-Value="SelectedBrand" CustomStringSelector="@(i => i?.Bezeichnung)" Required="true"
+                                 @onkeydown="InputCursorHandler.OnKeyDownHandlerAsync">
                                     <ItemTemplate>
                                         <div>
                                             <span>@context?.Bezeichnung</span>
@@ -94,7 +97,8 @@
                             </div>
                         </div>
                         <div class="mat-layout-grid-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-8-tablet mat-layout-grid-cell-span-12-desktop">
-                            <MatSelectValue Class="required" FullWidth="true" Outlined="true" Label="@I18n["Type"]" @bind-Value="selectedBcType" Items="@BicycleTypes" ValueSelector="@(i=>i)">
+                            <MatSelectValue Class="required" FullWidth="true" Outlined="true" Label="@I18n["Type"]" @bind-Value="selectedBcType" Items="@BicycleTypes" ValueSelector="@(i=>i)"
+                             @onkeydown="InputCursorHandler.OnKeyDownHandlerAsync">
                                 <ItemTemplate>
                                     <div>
                                         <span>@context?.Bezeichnung</span>
@@ -103,21 +107,25 @@
                             </MatSelectValue>
                         </div>
                         <div class="mat-layout-grid-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-8-tablet mat-layout-grid-cell-span-12-desktop">
-                            <MatStringField Class="w-100 form-check-label" Label="@I18n["FrameNumber"]" Outlined="true" type="text" @bind-Value="frameNumber"></MatStringField>
+                            <MatStringField Class="w-100 form-check-label" Label="@I18n["FrameNumber"]" Outlined="true" type="text" @bind-Value="frameNumber"
+                             OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync">></MatStringField>
                         </div>
                     </div>
                 </div>
                 <div class="mat-layout-grid-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-8-tablet mat-layout-grid-cell-span-4-desktop">
                     <div class="mat-layout-grid-inner">
                         <div class="mat-layout-grid-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-4-tablet mat-layout-grid-cell-span-12-desktop">
-                            <MatNumericUpDownField Class="w-100" Label="@I18n["Age"]" Outlined="true" @bind-Value="@age"></MatNumericUpDownField>
+                            <MatNumericUpDownField Class="w-100" Label="@I18n["Age"]" Outlined="true" @bind-Value="@age"
+                             OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatNumericUpDownField>
                         </div>
                         <div class="mat-layout-grid-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-4-tablet mat-layout-grid-cell-span-12-desktop">
-                            <MatTextField Class="w-100 form-check-label" Label="@I18n["Price"]" Format="0.00" Outlined="true" @bind-Value="@price"></MatTextField>
+                            <MatTextField Class="w-100 form-check-label" Label="@I18n["Price"]" Format="0.00" Outlined="true" @bind-Value="@price"
+                             OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatTextField>
                         </div>
 
                         <div class="mat-layout-grid-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-8-tablet mat-layout-grid-cell-span-12-desktop">
-                            <MatSelectValue FullWidth="true" Outlined="true" Label="@I18n["SearchService"]" @bind-Value="selectedSearchService" Items="@SearchServices" ValueSelector="@(i=>i)">
+                            <MatSelectValue FullWidth="true" Outlined="true" Label="@I18n["SearchService"]" @bind-Value="selectedSearchService" Items="@SearchServices" ValueSelector="@(i=>i)"
+                             @onkeydown="InputCursorHandler.OnKeyDownHandlerAsync">
                                 <ItemTemplate>
                                     <div>
                                         <span>@context?.Bezeichnung</span>
@@ -126,12 +134,12 @@
                             </MatSelectValue>
                         </div>
                         <div class="mat-layout-grid-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-4-tablet mat-layout-grid-cell-span-12-desktop">
-                            <MatStringField Class="w-100 form-check-label" Label="@I18n["SearchServiceNbr"]" Outlined="true" type="text" @bind-Value="searchServiceNbr"></MatStringField>
+                            <MatStringField Class="w-100 form-check-label" Label="@I18n["SearchServiceNbr"]" Outlined="true" type="text" @bind-Value="searchServiceNbr"
+                             OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
                         </div>
-
-
                         <div class="mat-layout-grid-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-4-tablet mat-layout-grid-cell-span-12-desktop">
-                            <MatStringField Class="w-100 form-check-label" Label="@I18n["Remark"]" Outlined="true" type="text" @bind-Value="remark"></MatStringField>
+                            <MatStringField Class="w-100 form-check-label" Label="@I18n["Remark"]" Outlined="true" type="text" @bind-Value="remark"
+                             OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"></MatStringField>
                         </div>
                     </div>
                 </div>
@@ -278,7 +286,7 @@
         frameNumber = report.RahmenNummer;
         age = report.Alter;
         price = report.Preis;
-        selectedSearchService  = Array.Find(SearchServices, searchService => searchService.Id == report.SuchDienstId);
+        selectedSearchService = Array.Find(SearchServices, searchService => searchService.Id == report.SuchDienstId);
         searchServiceNbr = report.SuchDienstNr;
         remark = report.Bemerkung;
     }

Shared/Services/Fundvelo/Validator.cs

@@ -55,5 +55,16 @@ namespace cwebplusApp.Shared.Services {
                 throw new ArgumentException("ValidationException");
             }
         }
+
+        public static void ValidateAccount(UserData account) {
+            int notValid = 0;
+            notValid += String.IsNullOrEmpty(account.Salutation) ? 1 : 0;
+            notValid += String.IsNullOrEmpty(account.Firstname) ? 1 : 0;
+            notValid += String.IsNullOrEmpty(account.Lastname) ? 1 : 0;
+            notValid += String.IsNullOrEmpty(account.Phone) ? 1 : 0;
+            if (notValid > 0) {
+                throw new ArgumentException("ValidationException");
+            }
+        }
     }
 }

Shared/Services/InputCursorHandler.cs

@@ -12,28 +12,13 @@ namespace cwebplusApp.Shared.Services {
             this.jsRuntime = _jsRuntime;
         }
 
-        public async Task OnKeyPressHandlerAsync(KeyboardEventArgs e) {
-            Console.WriteLine("Key pressed: " + e.Key);
+        public async Task OnKeyDownHandlerAsync(KeyboardEventArgs e) {
             var reference = DotNetObjectReference.Create(this);
             if (e.Key.Equals("Enter") || e.Key.Equals("ArrowRight")) {
                 await jsRuntime.InvokeVoidAsync("MoveCursorToNextInput", reference, e.Key);
-                //await MoveInputCursor(true);
             } else if (e.Key.Equals("ArrowLeft")) {
                 await jsRuntime.InvokeVoidAsync("MoveCursorToPreviousInput", reference);
-                //await MoveInputCursor(false);
             }
         }
-
-        //public async Task MoveInputCursor(bool forward) {
-        //    var reference = DotNetObjectReference.Create(this);
-        //    if (forward) {
-        //        await jsRuntime.InvokeVoidAsync("MoveCursorToNextInput", reference);
-        //    } else {
-        //        await jsRuntime.InvokeVoidAsync("MoveCursorToPreviousInput", reference);
-        //    }
-        //}
-
-
-
     }
 }

wwwroot/index.html

@@ -69,31 +69,64 @@
             document.querySelector("body.mdc-dialog-scroll-lock")?.classList.remove("mdc-dialog-scroll-lock");
         }
 
-
         function MoveCursorToNextInput(dotNetObjRef, key) {
             if (key == "Enter" || key == "ArrowRight") {
-                var activeInput = document.activeElement;
-                var inputs = document.getElementsByTagName("input");
+                var activeElement = document.activeElement;
+                var inputs = getKeyboardFocusableElements();
                 var arr = Array.prototype.slice.call(inputs)
-                var index = arr.indexOf(activeInput);
-                if (index + 1 < arr.length && (key == "Enter" || activeInput.selectionStart == activeInput.value.length)) {
-                    arr[index + 1].focus();
-                    setTimeout(function () { arr[index + 1].select(); }, 50);
+                var index = arr.indexOf(activeElement);
+                if (index + 1 < arr.length && CanNavigateForward(activeElement, key)) {
+                    activeElement.dispatchEvent(new Event('focusout'));
+                    setTimeout(function () { arr[index + 1].focus(); }, 50);
+                    if (arr[index + 1].localName.includes('input') || arr[index + 1].localName.includes('textarea')) {
+                        setTimeout(function () { arr[index + 1].select(); }, 50);
+                    }
                 }
             }
         }
 
         function MoveCursorToPreviousInput(dotNetObjRef) {
-            var activeInput = document.activeElement;
-            var inputs = document.getElementsByTagName("input");
+            var activeElement = document.activeElement;
+            var inputs = getKeyboardFocusableElements();
             var arr = Array.prototype.slice.call(inputs)
-            var index = arr.indexOf(activeInput);
-            if (index - 1 >= 0 && activeInput.selectionStart == 0) {
-                arr[index - 1].focus();
-                setTimeout(function () { arr[index - 1].select(); }, 50);
+            var index = arr.indexOf(activeElement);
+            if (index - 1 >= 0 && CanNavigateBack(activeElement)) {
+                activeElement.dispatchEvent(new Event('focusout'));
+                setTimeout(function () { arr[index + 1].focus(); }, 50);
+                if (arr[index - 1].localName.includes('input') || arr[index - 1].localName.includes('textarea')) {
+                    setTimeout(function () { arr[index - 1].select(); }, 50);
+                }
+            }
+        }
+
+        function DispatchKeyboardEvent(dotNetObjRef, key) {
+            window.dispatchEvent(new KeyboardEvent('keydown', { 'key': key }));
+        }
+
+        function getKeyboardFocusableElements(element = document) {
+            return [...element.querySelectorAll('input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])')]
+                .filter(el => el.localName !='li' && !el.getAttribute("aria-hidden"))
+        }
+
+        function CanNavigateForward(element, key) {
+            if (element.getAttribute('class').includes('select') || element.getAttribute('class').includes('button')) {
+                if (key == "Enter") {
+                    return false;
+                }
+                return true;
+            } else {
+                return key == "Enter" || element.selectionStart == element.value.length
+                       || (element.selectionStart == 0 && element.selectionEnd == element.value.length);
             }
         }
 
+        function CanNavigateBack(element) {
+            if (element.getAttribute('class').includes('select') || element.getAttribute('class').includes('button')) {
+                return true;
+            } else {
+                return element.selectionStart == null ||element.selectionStart == 0;
+            }
+        }
     </script>
 
     <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"