From 715980d49c539a0068742689ba06bbe25f66e13a Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Wed, 29 Apr 2026 09:29:54 +0200
Subject: [PATCH] feat(TournamentGroupsTab, TournamentTab): improve input
 normalization and event handling

- Enhanced input fields in TournamentGroupsTab to utilize a normalization function for numeric inputs, allowing for empty values and enforcing minimum constraints.
- Added blur event handlers to trigger updates on input loss of focus, improving user experience.
- Updated TournamentTab to remove redundant modus change handling on advancingPerGroup update, streamlining the event flow.
---
 .../tournament/TournamentGroupsTab.vue        | 35 +++++++++++++++----
 frontend/src/views/TournamentTab.vue          |  2 +-
 2 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/tournament/TournamentGroupsTab.vue b/frontend/src/components/tournament/TournamentGroupsTab.vue
index 45cc1e92..c5f3cffd 100644
--- a/frontend/src/components/tournament/TournamentGroupsTab.vue
+++ b/frontend/src/components/tournament/TournamentGroupsTab.vue
@@ -20,11 +20,25 @@
                 <div class="groups-settings">
                     <label>
                         {{ $t('tournaments.advancersPerGroup') }}:
-                        <input type="number" :value="advancingPerGroup" @input="$emit('update:advancingPerGroup', parseInt($event.target.value))" min="1" @change="$emit('modus-change')" />
+                        <input
+                            type="number"
+                            :value="advancingPerGroup"
+                            min="1"
+                            @input="$emit('update:advancingPerGroup', normalizeNumberInput($event.target.value, { min: 1, allowEmpty: true }))"
+                            @keydown.enter.prevent="$event.target.blur()"
+                            @blur="onAdvancingPerGroupBlur($event.target.value)"
+                        />
                     </label>
                     <label>
                         {{ $t('tournaments.maxGroupSize') }}:
-                        <input type="number" :value="maxGroupSize" @input="$emit('update:maxGroupSize', parseInt($event.target.value))" min="1" />
+                        <input
+                            type="number"
+                            :value="maxGroupSize"
+                            min="1"
+                            @input="$emit('update:maxGroupSize', normalizeNumberInput($event.target.value, { min: 1, allowEmpty: true }))"
+                            @keydown.enter.prevent="$event.target.blur()"
+                            @blur="onMaxGroupSizeBlur($event.target.value)"
+                        />
                     </label>
                 </div>
                 
@@ -43,7 +57,7 @@
                                 type="number" 
                                 :value="groupsPerClassInput"
                                 @input="$emit('update:groupsPerClassInput', normalizeNumberInput($event.target.value, { min: 0, allowEmpty: true }))"
-                                @keydown.enter.prevent="onGroupsPerClassBlur($event.target.value)"
+                                @keydown.enter.prevent="$event.target.blur()"
                                 min="0" 
                                 @blur="onGroupsPerClassBlur($event.target.value)"
                                 class="class-group-input"
@@ -61,7 +75,7 @@
                             :value="numberOfGroups"
                             min="1"
                             @input="$emit('update:numberOfGroups', normalizeNumberInput($event.target.value, { min: 1, allowEmpty: true }))"
-                            @keydown.enter.prevent="onNumberOfGroupsBlur($event.target.value)"
+                            @keydown.enter.prevent="$event.target.blur()"
                             @blur="onNumberOfGroupsBlur($event.target.value)"
                         />
                     </label>
@@ -220,11 +234,11 @@ export default {
             required: true
         },
         advancingPerGroup: {
-            type: Number,
+            type: [Number, String],
             required: true
         },
         maxGroupSize: {
-            type: Number,
+            type: [Number, String],
             default: null
         },
         groupsPerClassInput: {
@@ -328,6 +342,15 @@ export default {
             this.$emit('update:numberOfGroups', normalized);
             this.$emit('group-count-change');
         },
+        onAdvancingPerGroupBlur(rawValue) {
+            const normalized = this.normalizeNumberInput(rawValue, { min: 1, allowEmpty: false });
+            this.$emit('update:advancingPerGroup', normalized);
+            this.$emit('modus-change');
+        },
+        onMaxGroupSizeBlur(rawValue) {
+            const normalized = this.normalizeNumberInput(rawValue, { min: 1, allowEmpty: false });
+            this.$emit('update:maxGroupSize', normalized);
+        },
         groupRankingsForGroup(group) {
             const key = `${group.groupId}-${group.classId ?? 'null'}`;
             return this.groupRankings[key] || [];
diff --git a/frontend/src/views/TournamentTab.vue b/frontend/src/views/TournamentTab.vue
index a76467ea..79d666ee 100644
--- a/frontend/src/views/TournamentTab.vue
+++ b/frontend/src/views/TournamentTab.vue
@@ -206,7 +206,7 @@
                 :active-group-cells="activeGroupCells"
                 :matches="matches"
                 @update:selectedViewClass="selectedViewClass = $event"
-                @update:advancingPerGroup="advancingPerGroup = $event; onModusChange()"
+                @update:advancingPerGroup="advancingPerGroup = $event"
                 @update:maxGroupSize="maxGroupSize = $event"
                 @update:groupsPerClassInput="groupsPerClassInput = $event"
                 @update:numberOfGroups="numberOfGroups = $event"