Merge pull request #1179 from Gadha2311/fixaddrowtab

fix: tab issue when adding a new row

src/components/Controls/Table.vue

@@ -66,9 +66,12 @@
           h-row-mid
           flex
           items-center
+          focus:outline-none focus:ring-1 focus:ring-blue-500
         "
         :class="value.length > 0 ? 'border-t dark:border-gray-800' : ''"
+        tabindex="0"
         @click="addRow"
+        @keydown.enter="addRow"
       >
         <div class="flex items-center ps-1">
           <feather-icon name="plus" class="w-4 h-4 text-gray-500" />
@@ -162,6 +165,7 @@ export default {
       window.tab = this;
     }
   },
+
   methods: {
     focus() {},
     async addRow() {
@@ -169,20 +173,30 @@ export default {
       await nextTick();
       this.scrollToRow(this.value.length - 1);
       this.triggerChange(this.value);
+      this.$nextTick(() => {
+        const rows = this.$refs['table-row'];
+        if (rows && rows.length > 0) {
+          const lastRow = rows[rows.length - 1];
+          if (lastRow.focusFirstInput) {
+            lastRow.focusFirstInput();
+          }
+        }
+      });
     },
     removeRow(row) {
       this.doc.remove(this.df.fieldname, row.idx).then((s) => {
         if (!s) {
           return;
         }
-
         this.triggerChange(this.value);
       });
     },
+
     scrollToRow(index) {
       const row = this.$refs['table-row'][index];
       row && row.$el.scrollIntoView({ block: 'nearest' });
     },
+
     setMaxHeight() {
       if (this.maxRowsBeforeOverflow === 0) {
         return (this.maxHeight = '');

src/components/Controls/TableRow.vue

@@ -5,28 +5,71 @@
     :class="readOnly ? '' : 'hover:bg-gray-25 dark:hover:bg-gray-900'"
   >
     <!-- Index or Remove button -->
-    <div class="flex items-center ps-2 text-gray-600 dark:text-gray-400">
-      <span class="hidden" :class="{ 'group-hover:inline-block': !readOnly }">
+    <div
+      class="flex items-center ps-2 text-gray-600 dark:text-gray-400"
+      @mouseenter="isRowIndexVisible = false"
+      @mouseleave="isRowIndexVisible = true"
+    >
+      <span class="relative w-4 h-4 flex items-center justify-center">
         <feather-icon
+          v-if="!readOnly && !isRowIndexVisible"
           name="x"
-          class="w-4 h-4 -ms-1 cursor-pointer"
+          class="
+            w-4
+            h-4
+            -ms-1
+            cursor-pointer
+            rounded
+            focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-blue-50
+            dark:focus:bg-gray-800
+            transition
+          "
           :button="true"
+          tabindex="0"
+          role="button"
+          aria-label="Delete row"
           @click="$emit('remove')"
+          @keydown.enter="$emit('remove')"
         />
+        <span
+          v-if="!readOnly && isRowIndexVisible"
+          class="
+            absolute
+            left-0
+            top-0
+            w-full
+            h-full
+            flex
+            items-center
+            justify-center
+            focus:outline-none
+            focus-visible:ring-2 focus-visible:ring-blue-500
+            rounded
+          "
+          tabindex="0"
+          role="button"
+          aria-label="Delete row"
+          @focus="isRowIndexVisible = false"
+          @keydown.enter="$emit('remove')"
+        >
+          {{ row.idx + 1 }}
+        </span>
       </span>
-      <span :class="{ 'group-hover:hidden': !readOnly }">
+      <span v-if="readOnly">
         {{ row.idx + 1 }}
       </span>
     </div>
 
     <!-- Data Input Form Control -->
     <FormControl
-      v-for="df in tableFields"
+      v-for="(df, i) in tableFields"
       :key="df.fieldname"
       :size="size"
       :df="df"
       :value="row[df.fieldname]"
       @change="(value) => onChange(df, value)"
+      @focus="onFieldFocus(i)"
+      @blur="onFieldBlur(i)"
     />
     <Button
       v-if="canEditRow"
@@ -84,7 +127,10 @@ export default {
     },
   },
   emits: ['remove', 'change'],
-  data: () => ({ hovering: false, errors: {} }),
+  data: () => ({
+    isRowIndexVisible: false,
+    errors: {},
+  }),
   computed: {
     hasErrors() {
       return Object.values(this.errors).filter(Boolean).length;
@@ -98,7 +144,6 @@ export default {
       const fieldname = df.fieldname;
       this.errors[fieldname] = null;
       const oldValue = this.row[fieldname];
-
       try {
         await this.row.set(fieldname, value);
         this.$emit('change', df, value);
@@ -112,12 +157,27 @@ export default {
       return Object.values(this.errors).filter(Boolean).join(' ');
     },
     openRowQuickEdit() {
-      if (!this.row) {
-        return;
-      }
-
+      if (!this.row) return;
       this.$parent.$emit('editrow', this.row);
     },
+    onFieldFocus(index) {
+      if (index === 0) {
+        this.isRowIndexVisible = true;
+      }
+    },
+    onFieldBlur(index) {
+      if (index === 0) {
+        this.isRowIndexVisible = false;
+      }
+    },
+    focusFirstInput() {
+      const firstControl = this.$el.querySelector(
+        '.form-control, input, textarea, select'
+      );
+      if (firstControl) {
+        firstControl.focus();
+      }
+    },
   },
 };
 </script>