fix(ControlLink)!: Fix link selection in tables on iOS (#25472)

* fix(ControlLink)!: Fix link selection in tables on iOS

* test: use correct selector

* test: change selector

---------

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
Co-authored-by: Ankush Menat <ankush@frappe.io>

cypress/integration/control_dynamic_link.js

@@ -85,7 +85,7 @@ context("Dynamic Link", () => {
 		//Checking if the listbox have length greater than 0
 		cy.get('[data-fieldname="doc_id"]')
 			.find(".awesomplete")
-			.find("li")
+			.find("div")
 			.its("length")
 			.should("be.gte", 0);
 		cy.get(".btn-modal-close").click({ force: true });
@@ -100,7 +100,7 @@ context("Dynamic Link", () => {
 		//Checking if the listbox have length greater than 0
 		cy.get('[data-fieldname="doc_id"]')
 			.find(".awesomplete")
-			.find("li")
+			.find("div")
 			.its("length")
 			.should("be.gte", 0);
 		cy.get(".btn-modal-close").click({ force: true, multiple: true });
@@ -119,7 +119,7 @@ context("Dynamic Link", () => {
 		//Checking if the listbox have length greater than 0
 		cy.get('[data-fieldname="doc_id"]')
 			.find(".awesomplete")
-			.find("li")
+			.find("div")
 			.its("length")
 			.should("be.gte", 0);
 
@@ -134,7 +134,7 @@ context("Dynamic Link", () => {
 		//Checking if the listbox have length greater than 0
 		cy.get('[data-fieldname="doc_id"]')
 			.find(".awesomplete")
-			.find("li")
+			.find("div")
 			.its("length")
 			.should("be.gte", 0);
 		cy.get_field("doc_type").clear();
@@ -143,7 +143,7 @@ context("Dynamic Link", () => {
 		cy.intercept("/api/method/frappe.desk.search.search_link").as("search_query");
 		cy.fill_field("doc_type", "System Settings", "Link", { delay: 500 });
 		cy.wait("@search_query");
-		cy.get(`[data-fieldname="doc_type"] ul:visible li:first-child`).click({
+		cy.get(`[data-fieldname="doc_type"] ul:visible div:first-child`).click({
 			scrollBehavior: false,
 		});
 

frappe/public/js/frappe/form/controls/link.js

@@ -219,10 +219,13 @@ frappe.ui.form.ControlLink = class ControlLink extends frappe.ui.form.ControlDat
 				) {
 					html += '<br><span class="small">' + __(d.description) + "</span>";
 				}
-				return $("<li></li>")
+				return $(`<div role="option">`)
+					.on("click", (event) => {
+						me.awesomplete.select(event.currentTarget, event.currentTarget);
+					})
 					.data("item.autocomplete", d)
 					.prop("aria-selected", "false")
-					.html(`<a><p title="${frappe.utils.escape_html(_label)}">${html}</p></a>`)
+					.html(`<p title="${frappe.utils.escape_html(_label)}">${html}</p>`)
 					.get(0);
 			},
 			sort: function () {

frappe/public/scss/common/awesomeplete.scss

@@ -12,11 +12,11 @@
 		display: block;
 	}
 
-	& > ul:empty {
-		display: none;
-	}
+	& > [role="listbox"] {
+		&:empty {
+			display: none;
+		}
 
-	& > ul {
 		position: absolute;
 		width: 100%;
 		list-style: none;
@@ -33,7 +33,8 @@
 		z-index: 4;
 		min-width: 250px;
 
-		& > li {
+		& > li,
+		& > [role="option"] {
 			cursor: pointer;
 			@include get_textstyle("sm", "regular");
 			padding: var(--padding-sm);
@@ -52,17 +53,17 @@
 			strong {
 				@include get_textstyle("sm", "bold");
 			}
-		}
 
-		& > li .link-option {
-			font-weight: normal;
-			color: var(--text-color);
-		}
+			.link-option {
+				font-weight: normal;
+				color: var(--text-color);
+			}
 
-		& > li:hover,
-		& > li[aria-selected="true"] {
-			background-color: var(--awesomplete-hover-bg);
-			color: var(--text-color);
+			&:hover,
+			&[aria-selected="true"] {
+				background-color: var(--awesomplete-hover-bg);
+				color: var(--text-color);
+			}
 		}
 
 		a:hover {

frappe/public/scss/common/modal.scss

@@ -85,7 +85,8 @@ body.modal-open[style^="padding-right"] {
 		}
 	}
 
-	.awesomplete ul {
+	.awesomplete ul,
+	.awesomplete [role="listbox"] {
 		z-index: 2;
 	}
 

frappe/public/scss/desk/filters.scss

@@ -31,11 +31,13 @@
 		}
 
 		.awesomplete {
-			ul[role="listbox"] {
+			& > ul,
+			& > [role="listbox"] {
 				min-width: 100%;
 				width: auto;
 
-				li {
+				& > li,
+				& > [role="option"] {
 					max-width: 300px;
 				}
 			}