From 3057951d6a75171178b9908d548ddd6fa79dee96 Mon Sep 17 00:00:00 2001
From: Fredrick W Warren <fredwarren@gmail.com>
Date: Thu, 11 Feb 2021 09:01:03 -0800
Subject: [PATCH] 14.02 Custom Directive - Select All Text in Input when
 Clicked

---
 .../Tasks/Modals/Shared/ModalTaskName.vue     | 25 ++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/Tasks/Modals/Shared/ModalTaskName.vue b/src/components/Tasks/Modals/Shared/ModalTaskName.vue
index 2784397..f144488 100644
--- a/src/components/Tasks/Modals/Shared/ModalTaskName.vue
+++ b/src/components/Tasks/Modals/Shared/ModalTaskName.vue
@@ -6,7 +6,7 @@
     @input="$emit('update:name', $event)"
     :rules="[val => !!val || 'Field is required']"
     clearable
-    autofocus
+    v-select-all
     ref="name"
     label="Task name"
     class="col" />
@@ -16,10 +16,29 @@
 <script>
 export default {
   name: 'ModalTaskName',
+  directives: {
+    selectAll: {
+      // add callback to
+      inserted (el) {
+        const input = el.querySelector('.q-field__native')
+        // could also use this.$refs.name.$refs.input
+        input.addEventListener('focus', () => {
+          if (input.value.length) {
+            input.select()
+          }
+        })
+      }
+    }
+  },
   props: [
     'name'
-  ]
-
+  ],
+  mounted () {
+    this.$nextTick(() => {
+      // content of form does not populate before first render
+      this.$refs.name.$refs.input.focus()
+    })
+  }
 }
 </script>