Merge pull request #34007 from sokumon/child-table-keyboard

fix: add new row after last field while navigating via keyboard

frappe/public/js/frappe/form/controls/table.js

@@ -24,10 +24,14 @@ frappe.ui.form.ControlTable = class ControlTable extends frappe.ui.form.Control
 						this.grid.grid_rows[row_idx - 1].toggle_editable_row(true);
 					}
 				} else {
-					if (this.grid.grid_rows.length > 0)
+					if (this.grid.grid_rows.length > 0) {
 						this.grid.grid_rows[this.grid.grid_rows.length - 1].toggle_editable_row(
 							true
 						);
+					} else {
+						this.grid.add_new_row(null, null, true, null, true);
+						this.grid.grid_rows[0].toggle_editable_row(true);
+					}
 				}
 			}
 		});

frappe/public/js/frappe/form/grid.js

@@ -70,7 +70,7 @@ export default class Grid {
 				<p class="text-muted small grid-description"></p>
 				<div class="grid-custom-buttons"></div>
 				<div class="form-grid-container">
-					<div class="form-grid">
+					<div class="form-grid" tabIndex="0">
 						<div class="grid-heading-row"></div>
 						<div class="grid-body">
 							<div class="rows"></div>
@@ -940,7 +940,7 @@ export default class Grid {
 
 		setTimeout(() => {
 			this.grid_rows[idx].row
-				.find('input[type="checkbox"],input[type="Text"],textarea,select')
+				.find('input[type="Text"],textarea,select')
 				.filter(":visible:first")
 				.focus();
 		}, 100);

frappe/public/js/frappe/form/grid_row.js

@@ -12,7 +12,7 @@ export default class GridRow {
 			mandatory: [],
 			read_only: [],
 		};
-		this.row_check_html = '<input type="checkbox" class="grid-row-check">';
+		this.row_check_html = '<input type="checkbox" class="grid-row-check" tabIndex="-1">';
 		this.make();
 	}
 	make() {
@@ -343,7 +343,7 @@ export default class GridRow {
 		if (this.doc && !this.grid.df.in_place_edit) {
 			// remove row
 			if (!this.open_form_button) {
-				this.open_form_button = $('<button class="col"></button>').appendTo(this.row);
+				this.open_form_button = $('<div class="col"></div>').appendTo(this.row);
 
 				if (!this.configure_columns) {
 					const edit_msg = __("Edit", "", "Edit grid row");
@@ -1257,7 +1257,24 @@ export default class GridRow {
 				}
 
 				// TAB
-				if (e.which === UP_ARROW) {
+				if (e.which === TAB && !e.shiftKey) {
+					var last_column = me.wrapper.find("input:enabled:last").get(0);
+					var is_last_column = $(this).attr("data-last-input") || last_column === this;
+
+					if (is_last_column) {
+						// last row
+						if (me.doc.idx === values.length) {
+							me.grid.add_new_row(null, null, true);
+							me.grid.grid_rows[me.grid.grid_rows.length - 1].toggle_editable_row();
+							me.grid.set_focus_on_row();
+						} else {
+							// last column before last row
+							me.grid.grid_rows[me.doc.idx].toggle_editable_row();
+							me.grid.set_focus_on_row(me.doc.idx);
+							return false;
+						}
+					}
+				} else if (e.which === UP_ARROW) {
 					if (me.doc.idx > 1) {
 						var prev = me.grid.grid_rows[me.doc.idx - 2];
 						if (move_up_down(prev)) {

frappe/public/scss/common/grid.scss

@@ -1,9 +1,16 @@
+@mixin grid-focus() {
+	outline: none;
+	border: 1px solid var(--gray-400) !important;
+}
 .form-grid {
 	border: 1px solid var(--table-border-color);
 	border-radius: var(--border-radius-md);
 	color: var(--text-color);
 	min-height: 150px;
 	background-color: var(--subtle-accent);
+	&:focus-visible {
+		@include grid-focus();
+	}
 }
 
 .form-grid.error {
@@ -687,6 +694,9 @@
 		display: grid;
 		grid-auto-rows: min-content;
 		border: unset;
+		&:focus-visible {
+			@include grid-focus();
+		}
 		.grid-static-col.col-xs-1 {
 			flex: 1 0 60px;
 			width: 60px;