Difuse/luci
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

luci-base: ui.js: rework dropdown focus behavior

Browse source 
Drop mouse following focus behavior as it interferes with custom value inputs,
rely on CSS based hover effects instead.

Also slightly improve keyboard navigation by auto-focussing the custom value
input when entering the last dropdown choice via arrow down or tab key, and
by allowing to leave the text input again with the arrow up key.

Fixes: #6903
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
This commit is contained in:
Jo-Philipp Wich 2024-02-18 23:25:55 +01:00
parent 01e5510888
commit 3980c192cd
1 changed files with 20 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
modules/luci-base/htdocs/luci-static/resources/ui.js
View file

@ -1187,8 +1187,6 @@ var UIDropdown = UIElement.extend(/** @lends LuCI.ui.Dropdown.prototype */ {
window.addEventListener('touchstart', this.closeAllDropdowns); window.addEventListener('touchstart', this.closeAllDropdowns);
} }
else { else {
sb.addEventListener('mouseover', this.handleMouseover.bind(this));
sb.addEventListener('mouseout', this.handleMouseout.bind(this));
sb.addEventListener('focus', this.handleFocus.bind(this)); sb.addEventListener('focus', this.handleFocus.bind(this));
canary.addEventListener('focus', this.handleCanaryFocus.bind(this)); canary.addEventListener('focus', this.handleCanaryFocus.bind(this));
@ -1340,6 +1338,7 @@ var UIDropdown = UIElement.extend(/** @lends LuCI.ui.Dropdown.prototype */ {
sb.insertBefore(pv, ul.nextElementSibling); sb.insertBefore(pv, ul.nextElementSibling);
li.forEach(function(l) { li.forEach(function(l) {
if (!l.hasAttribute('unselectable'))
l.setAttribute('tabindex', 0); l.setAttribute('tabindex', 0);
}); });
@ -1581,20 +1580,6 @@ var UIDropdown = UIElement.extend(/** @lends LuCI.ui.Dropdown.prototype */ {
elem.focus(); elem.focus();
}, },
/** @private */
handleMouseout: function(ev) {
var sb = ev.currentTarget;
if (!sb.hasAttribute('open'))
return;
sb.querySelectorAll('.focus').forEach(function(e) {
e.classList.remove('focus');
});
sb.querySelector('ul.dropdown').focus();
},
/** @private */ /** @private */
createChoiceElement: function(sb, value, label) { createChoiceElement: function(sb, value, label) {
var tpl = sb.querySelector(this.options.create_template), var tpl = sb.querySelector(this.options.create_template),
@ -1826,7 +1811,12 @@ var UIDropdown = UIElement.extend(/** @lends LuCI.ui.Dropdown.prototype */ {
case 40: case 40:
if (active && active.nextElementSibling) { if (active && active.nextElementSibling) {
this.setFocus(sb, active.nextElementSibling); var li = active.nextElementSibling;
this.setFocus(sb, li);
if (this.options.create && li == li.parentNode.lastElementChild) {
var input = li.querySelector('input');
if (input) input.focus();
}
ev.preventDefault(); ev.preventDefault();
} }
else if (document.activeElement === ul) { else if (document.activeElement === ul) {
@ -1857,19 +1847,6 @@ var UIDropdown = UIElement.extend(/** @lends LuCI.ui.Dropdown.prototype */ {
this.closeDropdown(sb, true); this.closeDropdown(sb, true);
}, },
/** @private */
handleMouseover: function(ev) {
var sb = ev.currentTarget;
if (!sb.hasAttribute('open'))
return;
var li = findParent(ev.target, 'li');
if (li && li.parentNode.classList.contains('dropdown'))
this.setFocus(sb, li);
},
/** @private */ /** @private */
handleFocus: function(ev) { handleFocus: function(ev) {
var sb = ev.currentTarget; var sb = ev.currentTarget;
@ -1888,7 +1865,8 @@ var UIDropdown = UIElement.extend(/** @lends LuCI.ui.Dropdown.prototype */ {
/** @private */ /** @private */
handleCreateKeydown: function(ev) { handleCreateKeydown: function(ev) {
var input = ev.currentTarget, var input = ev.currentTarget,
sb = findParent(input, '.cbi-dropdown'); li = findParent(input, 'li'),
sb = findParent(li, '.cbi-dropdown');
switch (ev.keyCode) { switch (ev.keyCode) {
case 13: case 13:
@ -1901,19 +1879,28 @@ var UIDropdown = UIElement.extend(/** @lends LuCI.ui.Dropdown.prototype */ {
input.value = ''; input.value = '';
input.blur(); input.blur();
break; break;
case 38:
if (li.previousElementSibling) {
this.handleCreateBlur(ev);
this.setFocus(sb, li.previousElementSibling, true);
}
break;
} }
}, },
/** @private */ /** @private */
handleCreateFocus: function(ev) { handleCreateFocus: function(ev) {
var input = ev.currentTarget, var input = ev.currentTarget,
cbox = findParent(input, 'li').querySelector('input[type="checkbox"]'), li = findParent(input, 'li'),
cbox = li.querySelector('input[type="checkbox"]'),
sb = findParent(input, '.cbi-dropdown'); sb = findParent(input, '.cbi-dropdown');
if (cbox) if (cbox)
cbox.checked = true; cbox.checked = true;
sb.setAttribute('locked-in', ''); sb.setAttribute('locked-in', '');
this.setFocus(sb, li, true);
}, },
/** @private */ /** @private */