@afeefa/vue-app 0.0.167 → 0.0.168

package/.afeefa/package/release/version.txt

@@ -1 +1 @@
-0.0.167
+0.0.168

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@afeefa/vue-app",
-  "version": "0.0.167",
+  "version": "0.0.168",
   "description": "",
   "author": "Afeefa Kollektiv <kollektiv@afeefa.de>",
   "license": "MIT",

package/src/components/ADatePicker.vue

@@ -52,7 +52,7 @@ import { PositionConfig } from '../services/PositionService'
 import { randomCssClass } from '../utils/random'
 
 @Component({
-  props: ['value', 'validator', 'type', {dense: true, outlined: true}]
+  props: ['value', 'validator', 'type', {dense: true, outlined: true, focus: false}]
 })
 export default class ADatePicker extends Mixins(ComponentWidthMixin, UsesPositionServiceMixin, CancelOnEscMixin) {
   value_ = null
@@ -65,6 +65,8 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin, UsesPositio
   }
 
   mounted () {
+    this.setFocus()
+
     this.validate()
   }
 
@@ -74,6 +76,11 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin, UsesPositio
     this.validate()
   }
 
+  @Watch('focus')
+  focusChanged () {
+    this.setFocus()
+  }
+
   get clearable () {
     if (this.validator && this.validator.getParam('filled')) {
       return false
@@ -292,6 +299,17 @@ export default class ADatePicker extends Mixins(ComponentWidthMixin, UsesPositio
     }
     return []
   }
+
+  setFocus (force = false) {
+    const focus = this.focus || force // set focus if this.focus or else if forced from outside
+    if (focus) {
+      // if run in a v-dialog, the dialog background would
+      // steal the focus without requestAnimationFrame
+      requestAnimationFrame(() => {
+        this.$el.querySelector('input').focus()
+      })
+    }
+  }
 }
 </script>