From 53e8f108a67fa23fa5c1cee1b804c6fa027e4794 Mon Sep 17 00:00:00 2001 From: Jo-Philipp Wich Date: Wed, 21 Feb 2024 15:30:16 +0100 Subject: [PATCH] luci-base: ui.js: further keyboard navigation improvements for dropdowns - Ensure that pressing escape within the custom choice input closes the dropdown list but not the parent modal dialog - Ensure that added custom choice elements are tabbable - Retain focus on dropdown when closing dropdown - Consistently focus input textarea when tabbing into custom choice item Signed-off-by: Jo-Philipp Wich (cherry picked from commit 317ed4a0432b3f57c0cf76e633c180b171b7aae1) --- .../luci-base/htdocs/luci-static/resources/ui.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/modules/luci-base/htdocs/luci-static/resources/ui.js b/modules/luci-base/htdocs/luci-static/resources/ui.js index c62df429db..33739b798e 100644 --- a/modules/luci-base/htdocs/luci-static/resources/ui.js +++ b/modules/luci-base/htdocs/luci-static/resources/ui.js @@ -1458,7 +1458,7 @@ var UIDropdown = UIElement.extend(/** @lends LuCI.ui.Dropdown.prototype */ { li.setAttribute('display', 0); li.setAttribute('selected', ''); - this.closeDropdown(sb, true); + this.closeDropdown(sb); } this.saveValues(sb, ul); @@ -1605,6 +1605,9 @@ var UIDropdown = UIElement.extend(/** @lends LuCI.ui.Dropdown.prototype */ { if (this.options.multiple) this.transformItem(sb, new_item); + if (!new_item.hasAttribute('unselectable')) + new_item.setAttribute('tabindex', 0); + return new_item; }, @@ -1814,7 +1817,7 @@ var UIDropdown = UIElement.extend(/** @lends LuCI.ui.Dropdown.prototype */ { var li = active.nextElementSibling; this.setFocus(sb, li); if (this.options.create && li == li.parentNode.lastElementChild) { - var input = li.querySelector('input'); + var input = li.querySelector('input:not([type="hidden"]):not([type="checkbox"]'); if (input) input.focus(); } ev.preventDefault(); @@ -1875,9 +1878,16 @@ var UIDropdown = UIElement.extend(/** @lends LuCI.ui.Dropdown.prototype */ { if (input.classList.contains('cbi-input-invalid')) return; + this.handleCreateBlur(ev); this.createItems(sb, input.value); input.value = ''; - input.blur(); + break; + + case 27: + this.handleCreateBlur(ev); + this.closeDropdown(sb); + ev.stopPropagation(); + input.value = ''; break; case 38: -- 2.30.2