Merge pull request #34342 from iamejaaz/fix-grid-link-field-scroll

fix: link field scrolling issue in grid

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

@@ -1037,6 +1037,8 @@ export default class GridRow {
 			input_field.trigger("focus");
 		}
 
+		let is_focused = false;
+
 		var $col = $(
 			`<div class="col grid-static-col col-xs-${colsize} ${add_class}" style="${add_style}"></div>`
 		)
@@ -1044,22 +1046,39 @@ export default class GridRow {
 			.attr("data-fieldtype", df.fieldtype)
 			.data("df", df)
 			.appendTo(this.row)
-			.on("click", function (event) {
+			.on("focusin", function (event) {
+				if (is_focused) return;
+				is_focused = true;
 				if (df.fieldtype === "Link" || df.fieldtype === "Dynamic Link") {
-					frappe.utils.sleep(500).then(() => {
-						let element_position = event.target.getBoundingClientRect();
-						$(this)
-							.find(".awesomplete > ul:first-of-type")
-							.css(
-								"top",
-								`${
-									element_position.bottom
-										? element_position.bottom
-										: event.clientY + 20
-								}px`
+					frappe.utils.sleep(300).then(() => {
+						let $dropdown = $(this).find(".awesomplete > ul:first-of-type");
+						let $grid_field = $dropdown.closest(".grid-field");
+
+						if ($grid_field.length) {
+							let $wrapper = $grid_field.find("div.awesomplete");
+							$wrapper = $(
+								`<div class="awesomplete ${$dropdown.attr("id")}"></div>`
 							);
+							$grid_field.append($wrapper);
+							$wrapper.append($dropdown);
+
+							let element_position = event.target.getBoundingClientRect();
+
+							let left_difference =
+								element_position.left - $grid_field.offset().left;
+							let top_difference =
+								element_position.top - $grid_field.offset().top + 30;
+							$wrapper.css({
+								position: "absolute",
+								top: `${top_difference + 10}px`,
+								left: `${left_difference}px`,
+								width: "250px",
+							});
+						}
 					});
 				}
+			})
+			.on("click", function (event) {
 				if (frappe.ui.form.editable_row !== me) {
 					var out = me.toggle_editable_row();
 				}

frappe/public/scss/common/grid.scss

@@ -384,14 +384,6 @@
 			height: 40px;
 		}
 	}
-	.grid-row:not(.grid-row-open) {
-		.awesomplete > ul {
-			position: fixed !important;
-			left: auto !important;
-			top: auto;
-			width: 250px !important;
-		}
-	}
 	.grid-static-col {
 		background-color: var(--fg-color);
 		&.sticky-grid-col {