From 15d5933821bf09be84b24084d967c8aef21f6502 Mon Sep 17 00:00:00 2001
From: Raphael Beer <raphael.beer@protonmail.com>
Date: Wed, 25 Mar 2020 08:12:58 +0100
Subject: [PATCH] Change: v-focus directive looking for input +

  Searches children and uses first <input> child.
  if target of v-focus is not instanceof HTMLInputElement

  Also, adds vue-directives to storybook and tests
---
 webapp/plugins/vue-directives.js | 9 ++++++++-
 webapp/storybook/helpers.js      | 4 +++-
 webapp/test/testSetup.js         | 2 ++
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/webapp/plugins/vue-directives.js b/webapp/plugins/vue-directives.js
index 7f09b2fb0..43daed57e 100644
--- a/webapp/plugins/vue-directives.js
+++ b/webapp/plugins/vue-directives.js
@@ -7,7 +7,14 @@ export default ({ app }) => {
       // Focus the element
       Vue.nextTick(() => {
         if (binding.value !== false) {
-          el.focus()
+          let target = el
+          const isInput = target instanceof HTMLInputElement
+          if (!isInput) {
+            target = el.querySelector('input')
+          }
+          if (target && typeof target.focus === 'function') {
+            target.focus()
+          }
         }
       })
     },
diff --git a/webapp/storybook/helpers.js b/webapp/storybook/helpers.js
index 677a2bf94..b6abf4c99 100644
--- a/webapp/storybook/helpers.js
+++ b/webapp/storybook/helpers.js
@@ -3,6 +3,7 @@ import Vuex from 'vuex'
 import vuexI18n from 'vuex-i18n/dist/vuex-i18n.umd.js'
 import Styleguide from '@human-connection/styleguide'
 import Filters from '~/plugins/vue-filters'
+import Directives from '~/plugins/vue-directives'
 import IziToast from '~/plugins/izi-toast'
 import layout from './layout.vue'
 import locales from '~/locales/index.js'
@@ -15,6 +16,7 @@ const helpers = {
     Vue.use(Styleguide)
     Vue.use(Filters)
     Vue.use(IziToast)
+    Vue.use(Directives)
 
     Vue.use(vuexI18n.plugin, helpers.store)
     locales.forEach(({ code }) => {
@@ -38,7 +40,7 @@ const helpers = {
           isAdmin() {
             return true
           },
-          user(state) {
+          user() {
             return { id: '1', name: 'admin', slug: 'admin' }
           },
         },
diff --git a/webapp/test/testSetup.js b/webapp/test/testSetup.js
index 3e0a04645..1c93d14b5 100644
--- a/webapp/test/testSetup.js
+++ b/webapp/test/testSetup.js
@@ -5,6 +5,7 @@ import Styleguide from '@human-connection/styleguide'
 import BaseComponents from '~/plugins/base-components'
 import Filters from '~/plugins/vue-filters'
 import InfiniteLoading from '~/plugins/vue-infinite-loading'
+import Directives from '~/plugins/vue-directives'
 
 global.localVue = createLocalVue()
 
@@ -13,4 +14,5 @@ global.localVue.use(VTooltip)
 global.localVue.use(Styleguide)
 global.localVue.use(BaseComponents)
 global.localVue.use(Filters)
+global.localVue.use(Directives)
 global.localVue.use(InfiniteLoading)