Add auto grow directive to textarea

client/src/components/content-blocks/assignment/SubmissionForm.vue

@@ -1,6 +1,8 @@
 <template>
-  <div class="submission-form__text-answer">
+  <div class="submission-form__text-answer submission-form">
       <textarea
+        v-auto-grow
+        rows="1"
         class="submission-form__textarea"
         placeholder="Ergebnis erfassen"
         :value="submission.text"

client/src/directives/auto-grow.js

@@ -0,0 +1,21 @@
+const resizeElement = (el) => {
+  el.style.height = `auto`;
+  el.style.height = `${el.clientHeight - el.offsetHeight + el.scrollHeight}px`;
+};
+
+export default {
+  update: resizeElement,
+  inserted: resizeElement,
+  bind(el, binding, vnode) {
+    el.classList.add('skillbox-auto-grow');
+    el.addEventListener('input', event => {
+      resizeElement(el);
+    })
+  },
+  unbind(el) {
+    el.classList.remove('skillbox-auto-grow');
+    el.removeEventListener('input', event => {
+      resizeElement(el);
+    })
+  }
+};

client/src/directives/click-outside.js

@@ -0,0 +1,14 @@
+// taken from https://stackoverflow.com/questions/36170425/detect-click-outside-element
+export default {
+  bind(el, binding, vnode) {
+    el.clickOutsideEvent = event => {
+      if (!(el === event.target || el.contains(event.target))) {
+        vnode.context[binding.expression](event);
+      }
+    };
+    document.body.addEventListener('click', el.clickOutsideEvent);
+  },
+  unbind(el) {
+    document.body.removeEventListener('click', el.clickOutsideEvent)
+  }
+};

client/src/main.js

@@ -14,6 +14,8 @@ import {Validator, install as VeeValidate} from 'vee-validate/dist/vee-validate.
 import {required, min} from 'vee-validate/dist/rules.esm.js';
 import veeDe from 'vee-validate/dist/locale/de';
 import {dateFilter} from './filters/date-filter';
+import autoGrow from '@/directives/auto-grow'
+import clickOutside from '@/directives/click-outside'
 
 Vue.config.productionTip = false;
 
@@ -58,20 +60,8 @@ if (process.env.GOOGLE_ANALYTICS_ID) {
   console.log(process.env.GOOGLE_ANALYTICS_ID);
 }
 
-// taken from https://stackoverflow.com/questions/36170425/detect-click-outside-element
-Vue.directive('click-outside', {
-  bind(el, binding, vnode) {
-    el.clickOutsideEvent = event => {
-      if (!(el === event.target || el.contains(event.target))) {
-        vnode.context[binding.expression](event);
-      }
-    };
-    document.body.addEventListener('click', el.clickOutsideEvent);
-  },
-  unbind(el) {
-    document.body.removeEventListener('click', el.clickOutsideEvent)
-  }
-});
+Vue.directive('click-outside', clickOutside);
+Vue.directive('auto-grow', autoGrow);
 
 const apolloProvider = new VueApollo({
   defaultClient: apolloClient
@@ -90,7 +80,7 @@ const dict = {
       min: 'Das neue Passwort muss mindestens 8 Zeichen lang sein'
     }
   }
-}
+};
 
 Validator.localize('de', veeDe)
 Validator.localize('de', dict)
@@ -101,7 +91,7 @@ Validator.extend('strongPassword', {
     const strongRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*?(),.":{}|<>+])(?=.{8,})/;
     return strongRegex.test(value);
   }
-})
+});
 Vue.use(VeeValidate, {
   locale: 'de'
 });

client/src/styles/_forms.scss

@@ -21,3 +21,10 @@
   @include inputstyle;
   height: 120px;
 }
+
+
+.skillbox-auto-grow {
+  overflow: hidden;
+  resize: none;
+  outline: 0;
+}