automatically focus after opening the dialog and support confirming with the enter key

src/components/desktop/AmountInput.vue

@@ -1,7 +1,7 @@
 <template>
     <v-text-field type="text" class="text-field-with-colored-label" :class="extraClass"
                   :color="color" :base-color="color"
-                  :density="density" :variant="variant"
+                  :density="density" :variant="variant" :autofocus="autofocus"
                   :readonly="!!readonly" :disabled="!!disabled"
                   :label="label" :placeholder="placeholder"
                   :persistent-placeholder="!!persistentPlaceholder"
@@ -73,7 +73,11 @@ import SnackBar from '@/components/desktop/SnackBar.vue';
 import { ref, computed, useTemplateRef, watch } from 'vue';
 
 import { useI18n } from '@/locales/helpers.ts';
-import { type CommonNumberInputProps, useCommonNumberInputBase } from '@/components/base/CommonNumberInputBase.ts';
+import {
+    type CommonNumberInputProps,
+    type CommonNumberInputEmits,
+    useCommonNumberInputBase
+} from '@/components/base/CommonNumberInputBase.ts';
 
 import { NumeralSystem, DecimalSeparator } from '@/core/numeral.ts';
 import type { CurrencyPrependAndAppendText } from '@/core/currency.ts';
@@ -97,6 +101,7 @@ interface DesktopAmountInputProps extends CommonNumberInputProps {
     color?: string;
     density?: ComponentDensity;
     variant?: InputVariant;
+    autofocus?: boolean;
     currency: string;
     showCurrency?: boolean;
     persistentPlaceholder?: boolean;
@@ -107,10 +112,7 @@ interface DesktopAmountInputProps extends CommonNumberInputProps {
 }
 
 const props = defineProps<DesktopAmountInputProps>();
-
-const emit = defineEmits<{
-    (e: 'update:modelValue', value: number): void;
-}>();
+const emit = defineEmits<CommonNumberInputEmits>();
 
 const {
     tt,
@@ -125,7 +127,7 @@ const {
     currentValue,
     onKeyUpDown,
     onPaste
-} = useCommonNumberInputBase(props, DEFAULT_DECIMAL_NUMBER_COUNT, getInitedFormattedValue(props.modelValue, props.flipNegative), parseAmountFromLocalizedNumerals, getFormattedValue, getValidFormattedValue);
+} = useCommonNumberInputBase(props, emit, DEFAULT_DECIMAL_NUMBER_COUNT, getInitedFormattedValue(props.modelValue, props.flipNegative), parseAmountFromLocalizedNumerals, getFormattedValue, getValidFormattedValue);
 
 const snackbar = useTemplateRef<SnackBarType>('snackbar');
 

src/components/desktop/AmountInputDialog.vue

@@ -10,11 +10,13 @@
                     <v-row>
                         <v-col cols="12">
                             <amount-input :persistent-placeholder="true"
+                                          :autofocus="true"
                                           :currency="dialogOptions?.currency"
                                           :show-currency="!!dialogOptions?.currency"
                                           :label="inputLabelContent"
                                           :placeholder="inputPlaceholderContent"
-                                          v-model="amount" />
+                                          v-model="amount"
+                                          @enter="confirm" />
                         </v-col>
                     </v-row>
                 </v-form>

src/components/desktop/NumberInput.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-text-field type="text" :class="extraClass" :density="density" :readonly="!!readonly" :disabled="!!disabled"
+    <v-text-field ref="textInput" type="text" :class="extraClass" :density="density" :readonly="!!readonly" :disabled="!!disabled"
                   :label="label" :placeholder="placeholder"
                   :persistent-placeholder="!!persistentPlaceholder"
                   v-model="currentValue"
@@ -8,7 +8,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { VTextField } from 'vuetify/components/VTextField';
+
+import { computed, useTemplateRef } from 'vue';
 
 import { type NumberInputProps, type NumberInputEmits, useNumberInputBase } from '@/components/base/NumberInputBase.ts';
 
@@ -29,7 +31,17 @@ const {
     onPaste
 } = useNumberInputBase(props, emit);
 
+const textInput = useTemplateRef<VTextField>('textInput');
+
 const extraClass = computed<string>(() => {
     return props.class || '';
 });
+
+function focus(): void {
+    textInput.value?.focus();
+}
+
+defineExpose({
+    focus
+});
 </script>