feat: Add handle focus to field. (#491)

* feat: Add handle focus to field.

* set example into test view and fix set focus with mounted hook.

* change named attributes.

* change attributes name to handleRequestFocus and handleContentSelection.

src/components/ADempiere/Field/FieldMixin.js

@@ -18,7 +18,7 @@ export const fieldMixin = {
       value = this.valueModel
     }
     return {
-      value: value
+      value
     }
   },
   computed: {
@@ -36,8 +36,16 @@ export const fieldMixin = {
       this.preHandleChange(value)
     }
   },
+  mounted() {
+    if (this.metadata.handleRequestFocus) {
+      this.requestFocus()
+    }
+  },
   methods: {
-    activeFocus() {
+    /**
+     * Set focus if handle focus attribute is true
+     */
+    requestFocus() {
       if (this.$refs[this.metadata.columnName]) {
         this.$refs[this.metadata.columnName].focus()
       }
@@ -51,7 +59,7 @@ export const fieldMixin = {
       this.handleChange(value)
     },
     focusGained(value) {
-      if (this.metadata.isAutoSelection) {
+      if (this.metadata.handleContentSelection) {
         // select all the content inside the text box
         if (!this.isEmptyValue(value.target.selectionStart) &&
           !this.isEmptyValue(value.target.selectionStart)) {

src/components/ADempiere/Field/index.vue

@@ -374,8 +374,8 @@ export default {
   },
   methods: {
     focusField() {
-      if (this.isDisplayed && !this.isReadOnly) {
-        this.$refs[this.field.columnName].activeFocus()
+      if (this.field.handleRequestFocus || (this.field.displayed && !this.field.readonly)) {
+        this.$refs[this.field.columnName].requestFocus()
       }
     }
   }

src/components/ADempiere/Panel/index.vue

@@ -700,13 +700,18 @@ export default {
         }
       }
       this.setTagsViewTitle(uuidRecord)
-      this.setFocus()
+      if (this.$route.query.action === 'create-new') {
+        this.setFocus()
+      }
       const currentRecord = this.getterDataStore.record.find(record => record.UUID === uuidRecord)
       this.$store.dispatch('currentRecord', currentRecord)
     },
     async setFocus() {
       return new Promise(resolve => {
         const fieldFocus = this.getterFieldList.find(itemField => {
+          if (itemField.handleRequestFocus) {
+            return true
+          }
           if (Object.prototype.hasOwnProperty.call(this.$refs, itemField.columnName)) {
             if (fieldIsDisplayed(itemField) && !itemField.isReadOnly && itemField.isUpdateable && itemField.componentPath !== 'FieldSelect') {
               return true

src/views/ADempiere/Test/fieldsList.js

@@ -6,7 +6,8 @@ export default [
     columnName: 'URL',
     definition: {
       name: 'Web',
-      isAutoSelection: true,
+      handleRequestFocus: true,
+      handleContentSelection: true,
       displayType: URL.id
     }
   },