diff --git a/src/web/waiters/OperationsWaiter.mjs b/src/web/waiters/OperationsWaiter.mjs index 39862ec9..3a92fc16 100755 --- a/src/web/waiters/OperationsWaiter.mjs +++ b/src/web/waiters/OperationsWaiter.mjs @@ -385,13 +385,23 @@ class OperationsWaiter { // any other open category automatically. Calling "show" on an already // open category would toggle-close it mid-transition, so skip it. const categoryElement = document.getElementById(categoryId); - if (categoryElement && !categoryElement.classList.contains("show")) { - $(categoryElement).collapse("show"); - } + if (!categoryElement) return; - // Scroll the category into view - if (categoryElement) { + const showCategory = function() { + if (!categoryElement.classList.contains("show")) { + $(categoryElement).collapse("show"); + } categoryElement.scrollIntoView({behavior: "smooth", block: "nearest"}); + }; + + // Bootstrap ignores "show" while another panel in the accordion is still + // mid-transition (e.g. a category collapsed by the search box a moment + // earlier), so wait for any in-progress transition to finish first. + const transitioning = document.querySelector("#categories .collapsing"); + if (transitioning) { + $(transitioning).one("hidden.bs.collapse shown.bs.collapse", showCategory); + } else { + showCategory(); } } diff --git a/tests/browser/00_nightwatch.js b/tests/browser/00_nightwatch.js index 545e7e50..270f694c 100644 --- a/tests/browser/00_nightwatch.js +++ b/tests/browser/00_nightwatch.js @@ -286,13 +286,14 @@ module.exports = { browser .expect.element("#catHashing").to.be.visible; - // Toggle the option off + // Toggle the option off. The checkbox input is restyled by Bootstrap + // Material Design and is not directly interactable, so click its label. browser .click("#options"); browser .waitForElementVisible("#options-modal", 1000) - .click("#showOpCategories") + .click("label[for='showOpCategories']") .pause(500) .click("#options-modal .modal-footer .btn-secondary[data-dismiss='modal']") .waitForElementNotVisible("#options-modal", 1000); @@ -315,7 +316,7 @@ module.exports = { browser .click("#options") .waitForElementVisible("#options-modal", 1000) - .click("#showOpCategories") + .click("label[for='showOpCategories']") .pause(500) .click("#options-modal .modal-footer .btn-secondary[data-dismiss='modal']") .waitForElementNotVisible("#options-modal", 1000);