14.02 Custom Directive - Select All Text in Input when Clicked

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>