From 37bf850eff0be46709e1b2c770fc419005045374 Mon Sep 17 00:00:00 2001 From: Eric Boehs Date: Mon, 13 Nov 2017 17:43:53 -0600 Subject: [PATCH] Fix Enter key and maintain activeElement after closing select After tabbing to a selectr element, pressing enter wouldn't activate the selected state to display the selectr container. After dismissing the dialog (e.g. via pressing enter), the tab focus was lost thus starting you back over at the top of the document (making using keyboard only navigation painful). --- src/selectr.js | 25 ++++++++++++++++++------- 1 file changed, 18 insertions(+), 7 deletions(-) diff --git a/src/selectr.js b/src/selectr.js index fed7d36..610e55e 100644 --- a/src/selectr.js +++ b/src/selectr.js @@ -1133,20 +1133,30 @@ } - // Open the dropdown with Enter key if focused - if (this.config.nativeDropdown) { - this.container.addEventListener("keydown", function(e) { - if (e.key === "Enter" && that.selected === document.activeElement) { - // Show the native + // Keyboard Support + this.container.addEventListener("keydown", function(e) { + if (e.key === "Escape") { + that.close(); + } + + if (e.key === "Enter" && that.selected === document.activeElement) { + if (typeof that.el.form.submit !== 'undefined') that.el.form.submit(); + } + + if ((e.key === " " || e.key === "ArrowUp" || e.key === "ArrowDown") && + that.selected === document.activeElement) { + setTimeout(function() { that.toggle(); + }, 200); + if (that.config.nativeDropdown) { // Focus on the native multiselect setTimeout(function() { that.el.focus(); }, 200); } - }); - } + } + }); // Non-native dropdown this.selected.addEventListener("click", function(e) { @@ -2043,6 +2053,7 @@ util.truncate(this.tree); clearSearch.call(this); + this.selected.focus(); };