inertia-bootstrap-forms 2.1.3 → 2.1.5

package/index.d.ts

@@ -209,6 +209,10 @@ export const FormContainer: DefineComponent<{
     method: {
         default: 'post'
     },
+    autoTab: {
+        type: Boolean,
+        default: true,
+    },
     only: {
         type: Array,
         default: [],

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "inertia-bootstrap-forms",
-    "version": "2.1.3",
+    "version": "2.1.5",
     "description": "Create bootstrap forms with inertia and twitter bootstrap",
     "main": "dist/inertia-bootstrap-forms.cjs.js",
     "module": "dist/inertia-bootstrap-forms.es.js",

package/src/FormContainer.vue

@@ -15,6 +15,10 @@ export default defineComponent({
     method: {
       default: 'post'
     },
+    autoTab: {
+      type: Boolean,
+      default: true,
+    },
     only: {
       type: Array,
       default: [],
@@ -90,6 +94,37 @@ export default defineComponent({
     }
   },
   methods: {
+    handleAutoTab(event) {
+      if (this.formEl?.dataset.autotab !== 'true') return;
+
+      const el = event.target;
+      if (!['INPUT', 'TEXTAREA'].includes(el.tagName)) return;
+
+      const maxLength = el.maxLength;
+      if (maxLength > 0 && el.value.length >= maxLength) {
+        this.focusNextField(el);
+      }
+    },
+    focusNextField(current) {
+      const focusable = Array.from(
+          this.formEl.querySelectorAll('input, select, textarea')
+      ).filter(el =>
+          !el.disabled &&
+          el.tabIndex !== -1 &&
+          el.type !== 'hidden' &&
+          el.offsetParent !== null
+      );
+
+      const index = focusable.indexOf(current);
+      const next = focusable[index + 1];
+
+      if (next) {
+        next.focus();
+        if (next.tagName !== 'SELECT' && typeof next.select === 'function') {
+          next.select();
+        }
+      }
+    },
     reset() {
       this.form.reset();
     },
@@ -161,6 +196,8 @@ export default defineComponent({
   <form ref="formEl"
         :action="url"
         :method="method"
+        :data-autotab="autoTab ? 'true' : ''"
+        @input="handleAutoTab"
         @submit.prevent="submit"
         @reset="$emit('reset')"
         :class="{'form-processing': form.processing}"