14.03 Custom Directive - Make it Global!

src/components/Tasks/Modals/Shared/ModalTaskName.vue

@@ -14,28 +14,20 @@
 </template>
 
 <script>
+import { selectAll } from 'src/directives/directive-select-all'
+
 export default {
   name: 'ModalTaskName',
   directives: {
-    selectAll: {
+    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
+      // input.value is null till after first render
+      // defer autofocus till field is populated
       this.$refs.name.$refs.input.focus()
     })
   }

src/components/Tasks/Tools/Search.vue

@@ -2,6 +2,7 @@
   <q-input
     outlined
     v-model="searchField"
+    v-select-all
     class="col"
     label="Search" >
     <template v-slot:append>
@@ -17,9 +18,13 @@
 
 <script>
 import { mapState, mapActions } from 'vuex'
+import { selectAll } from 'src/directives/directive-select-all'
 
 export default {
   name: 'Search',
+  directives: {
+    selectAll
+  },
   computed: {
     ...mapState('tasks', ['search']),
     searchField: {

src/directives/directive-select-all.js

@@ -0,0 +1,10 @@
+export const selectAll = {
+  inserted (el) {
+    const input = el.querySelector('.q-field__native')
+    input.addEventListener('focus', () => {
+      if (input.value.length) {
+        input.select()
+      }
+    })
+  }
+}