Merge pull request #17466 from hujambo-dunia/fix-autoselect-file-field

Fix for a regression change - auto-select/highlight file name text

client/src/components/Upload/DefaultRow.vue

@@ -3,14 +3,16 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { faEdit, faFolderOpen, faLaptop } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { bytesToString } from "utils/utils";
-import { computed } from "vue";
+import { computed, onMounted, ref } from "vue";
 
 import UploadExtension from "./UploadExtension.vue";
 import UploadSelect from "./UploadSelect.vue";
 import UploadSettings from "./UploadSettings.vue";
 
 library.add(faEdit, faLaptop, faFolderOpen);
 
+const fileField = ref(null);
+
 const props = defineProps({
     deferred: {
         type: Boolean,
@@ -104,6 +106,14 @@ function removeUpload() {
         emit("remove", props.index);
     }
 }
+
+onMounted(() => {
+    autoSelectFileInput();
+});
+
+function autoSelectFileInput() {
+    fileField.value.select();
+}
 </script>
 
 <template>
@@ -115,6 +125,7 @@ function removeUpload() {
                 <FontAwesomeIcon v-if="fileMode == 'url'" icon="fa-folder-open" fixed-width />
             </div>
             <b-input
+                ref="fileField"
                 :value="fileName"
                 class="upload-title p-1 border rounded"
                 :disabled="isDisabled"