diff --git a/cypress/integration/control_dynamic_link.js b/cypress/integration/control_dynamic_link.js
index 7f34f7ad42..f98e23c57a 100644
--- a/cypress/integration/control_dynamic_link.js
+++ b/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,
});
diff --git a/frappe/public/js/frappe/form/controls/link.js b/frappe/public/js/frappe/form/controls/link.js
index 7cae8684e8..e51fd1251f 100644
--- a/frappe/public/js/frappe/form/controls/link.js
+++ b/frappe/public/js/frappe/form/controls/link.js
@@ -219,10 +219,13 @@ frappe.ui.form.ControlLink = class ControlLink extends frappe.ui.form.ControlDat
) {
html += '
' + __(d.description) + "";
}
- return $("
${html}
`) + .html(`${html}
`) .get(0); }, sort: function () { diff --git a/frappe/public/scss/common/awesomeplete.scss b/frappe/public/scss/common/awesomeplete.scss index 2ec7c62253..471df71675 100644 --- a/frappe/public/scss/common/awesomeplete.scss +++ b/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 { diff --git a/frappe/public/scss/common/modal.scss b/frappe/public/scss/common/modal.scss index b2e888a41d..8c6d3abd60 100644 --- a/frappe/public/scss/common/modal.scss +++ b/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; } diff --git a/frappe/public/scss/desk/filters.scss b/frappe/public/scss/desk/filters.scss index 53e9dfea5a..27f21a087f 100644 --- a/frappe/public/scss/desk/filters.scss +++ b/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; } }