Added an autofocus field to most forms

app/imports/ui/components/global/SmartInputMixin.js

@@ -93,6 +93,9 @@ export default {
       this.safeValue = null;
       this.$nextTick(() => this.safeValue = this.value);
     },
+    focus(){
+      this.$refs.input.focus();
+    }
   },
   computed: {
     errors(){

app/imports/ui/components/global/TextField.vue

@@ -1,5 +1,6 @@
 <template lang="html">
   <v-text-field
+    ref="input"
     v-bind="$attrs"
     :loading="loading"
     :error-messages="errors"

app/imports/ui/properties/forms/ActionForm.vue

@@ -1,6 +1,7 @@
 <template lang="html">
   <div :class="attackForm ? 'attack-form' : 'action-form'">
     <text-field
+      ref="focusFirst"
       label="Name"
       :value="model.name"
       :error-messages="errors.name"

app/imports/ui/properties/forms/AttributeForm.vue

@@ -2,6 +2,7 @@
   <div class="attribute-form">
     <div class="layout column align-center">
       <text-field
+        ref="focusFirst"
         label="Base Value"
         class="base-value-field"
         hint="This is the value of the attribute before effects are applied"

app/imports/ui/properties/forms/BuffForm.vue

@@ -1,6 +1,7 @@
 <template lang="html">
   <div class="buff-form">
     <text-field
+      ref="focusFirst"
       label="Name"
       :value="model.name"
       :error-messages="errors.name"

app/imports/ui/properties/forms/ClassLevelForm.vue

@@ -12,6 +12,7 @@
     </div>
     <div class="layout row wrap">
       <text-field
+        ref="focusFirst"
         label="Name"
         :value="model.name"
         :error-messages="errors.name"

app/imports/ui/properties/forms/ContainerForm.vue

@@ -2,6 +2,7 @@
   <div class="attribute-form">
     <div class="layout row justify-space-between wrap">
       <text-field
+        ref="focusFirst"
         label="Name"
         :value="model.name"
         :error-messages="errors.name"

app/imports/ui/properties/forms/DamageForm.vue

@@ -2,6 +2,7 @@
   <div>
     <div class="layout row">
       <text-field
+        ref="focusFirst"
         label="Damage"
         style="flex-basis: 300px;"
         :value="model.amount"

app/imports/ui/properties/forms/DamageMultiplierForm.vue

@@ -1,6 +1,7 @@
 <template lang="html">
   <div class="attribute-form">
     <text-field
+      ref="focusFirst"
       label="Name"
       :value="model.name"
       :error-messages="errors.name"

app/imports/ui/properties/forms/EffectForm.vue

@@ -1,6 +1,7 @@
 <template lang="html">
   <div class="effect-form">
     <text-field
+      ref="focusFirst"
       label="Name"
       :value="model.name"
       :error-messages="errors.name"

app/imports/ui/properties/forms/FeatureForm.vue

@@ -1,6 +1,7 @@
 <template lang="html">
   <div class="feature-form">
     <text-field
+      ref="focusFirst"
       label="Name"
       :value="model.name"
       :error-messages="errors.name"

app/imports/ui/properties/forms/FolderForm.vue

@@ -2,6 +2,7 @@
   <div class="folder-form">
     <div class="layout row wrap">
       <text-field
+        ref="focusFirst"
         label="Name"
         style="flex-basis: 300px;"
         :value="model.name"

app/imports/ui/properties/forms/ItemForm.vue

@@ -20,6 +20,7 @@
     </div>
     <div class="layout row wrap">
       <text-field
+        ref="focusFirst"
         label="Name"
         :value="model.name"
         :error-messages="errors.name"

app/imports/ui/properties/forms/NoteForm.vue

@@ -1,6 +1,7 @@
 <template lang="html">
   <div class="feature-form">
     <text-field
+      ref="focusFirst"
       label="Name"
       :value="model.name"
       :error-messages="errors.name"

app/imports/ui/properties/forms/ProficiencyForm.vue

@@ -1,6 +1,7 @@
 <template lang="html">
   <div>
     <text-field
+      ref="focusFirst"
       label="Name"
       :value="model.name"
       :error-messages="errors.name"

app/imports/ui/properties/forms/RollForm.vue

@@ -1,6 +1,7 @@
 <template lang="html">
   <div class="roll-form">
     <text-field
+      ref="focusFirst"
       label="Roll"
       :value="model.roll"
       :error-messages="errors.roll"

app/imports/ui/properties/forms/SavingThrowForm.vue

@@ -1,6 +1,7 @@
 <template lang="html">
   <div class="saving-throw-form">
     <text-field
+      ref="focusFirst"
       label="Name"
       :value="model.name"
       :error-messages="errors.name"

app/imports/ui/properties/forms/SkillForm.vue

@@ -2,6 +2,7 @@
   <div class="skill-form">
     <div class="layout row wrap">
       <text-field
+        ref="focusFirst"
         label="Name"
         :value="model.name"
         :error-messages="errors.name"

app/imports/ui/properties/forms/SpellForm.vue

@@ -1,6 +1,7 @@
 <template lang="html">
   <div class="attribute-form">
     <text-field
+      ref="focusFirst"
       label="Name"
       :value="model.name"
       :error-messages="errors.name"

app/imports/ui/properties/forms/SpellListForm.vue

@@ -2,6 +2,7 @@
   <div class="attribute-form">
     <div class="layout row wrap">
       <text-field
+        ref="focusFirst"
         label="Name"
         :value="model.name"
         :error-messages="errors.name"

app/imports/ui/properties/forms/ToggleForm.vue

@@ -1,6 +1,7 @@
 <template lang="html">
   <div class="feature-form">
     <text-field
+      ref="focusFirst"
       label="Name"
       :value="model.name"
       :error-messages="errors.name"

app/imports/ui/properties/forms/shared/propertyFormMixin.js

@@ -9,6 +9,11 @@ export default {
       default: () => ({}),
     },
   },
+  mounted(){
+    if (this.$refs.focusFirst){
+      setTimeout(() => this.$refs.focusFirst.focus(), 300);
+    }
+  },
   methods: {
     change(path, value, ack){
       if (!Array.isArray(path)){
@@ -16,5 +21,5 @@ export default {
       }
       this.$emit('change', {path, value, ack});
     }
-  }
+  },
 }