Merge pull request ebkr#1200 from ebkr/profile-modal-input-focus

Focus on text inputs when profile management modals are opened
thunderstore-io · Feb 8, 2024 · e78f842 · e78f842
2 parents eedd1e1 + 4c299ca
commit e78f842
Showing 1 changed file with 27 additions and 3 deletions.
diff --git a/src/pages/Profiles.vue b/src/pages/Profiles.vue
@@ -12,7 +12,7 @@
               <div class="card-content">
                 <p>This profile will store its own mods independently from other profiles.</p>
                 <br/>
-                <input class="input" v-model="newProfileName" />
+                <input class="input" v-model="newProfileName" ref="profileNameInput" />
                 <br/><br/>
                 <span class="tag is-dark" v-if="newProfileName === '' || makeProfileNameSafe(newProfileName) === ''">
                     Profile name required
@@ -86,7 +86,7 @@
             <button class="button is-info"
               @click="importProfile(); showImportModal = false;">From file</button>
             <button class="button is-primary"
-              @click="profileImportCode = ''; showImportModal = false; showCodeModal = true;">From code</button>
+              @click="showImportModal = false; openProfileCodeModal();">From code</button>
           </div>
         </div>
       </div>
@@ -101,7 +101,7 @@
             <p class="card-header-title">Enter the profile code</p>
           </header>
           <div class="card-content">
-            <input type="text" class="input" v-model="profileImportCode" />
+            <input type="text" class="input" v-model="profileImportCode" ref="profileCodeInput" />
             <br />
             <br />
             <span class="tag is-dark" v-if="profileImportCode === ''">You haven't entered a code</span>
@@ -243,6 +243,7 @@
 <script lang='ts'>
 import Vue from 'vue';
 import Component from 'vue-class-component';
+import { Ref } from 'vue-property-decorator';
 import { Hero, Progress } from '../components/all';
 import sanitize from 'sanitize-filename';
 import ZipProvider from '../providers/generic/zip/ZipProvider';
@@ -284,6 +285,9 @@ let fs: FsProvider;
     }
 })
 export default class Profiles extends Vue {
+    @Ref() readonly profileCodeInput: HTMLInputElement | undefined;
+    @Ref() readonly profileNameInput: HTMLInputElement | undefined;
+
     private profileList: string[] = ['Default'];
 
     private selectedProfile: string = '';
@@ -338,6 +342,11 @@ export default class Profiles extends Vue {
         this.newProfileName = this.selectedProfile;
         this.addingProfileType = "Rename";
         this.renamingProfile = true;
+        this.$nextTick(() => {
+            if (this.profileNameInput) {
+                this.profileNameInput.focus();
+            }
+        });
     }
 
     async performRename(newName: string) {
@@ -359,6 +368,11 @@ export default class Profiles extends Vue {
         this.newProfileName = nameOverride || '';
         this.addingProfile = true;
         this.addingProfileType = type;
+        this.$nextTick(() => {
+            if (this.profileNameInput) {
+                this.profileNameInput.focus();
+            }
+        });
     }
 
     createProfile(profile: string) {
@@ -478,6 +492,16 @@ export default class Profiles extends Vue {
         });
     }
 
+    openProfileCodeModal() {
+        this.profileImportCode = '';
+        this.showCodeModal = true;
+        this.$nextTick(() => {
+            if (this.profileCodeInput) {
+                this.profileCodeInput.focus();
+            }
+        });
+    }
+
     async importProfileUsingCode() {
         try {
             const filepath = await ProfileImportExport.downloadProfileCode(this.profileImportCode);