Skip to content
This repository has been archived by the owner on Dec 7, 2021. It is now read-only.

Commit

Permalink
Fix Enter key and maintain activeElement after closing select
Browse files Browse the repository at this point in the history
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).
  • Loading branch information
ericboehs committed Nov 14, 2017
1 parent bcb6c90 commit 70feae7
Showing 1 changed file with 18 additions and 7 deletions.
25 changes: 18 additions & 7 deletions src/selectr.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
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) {
Expand Down Expand Up @@ -2043,6 +2053,7 @@

util.truncate(this.tree);
clearSearch.call(this);
this.selected.focus();
};


Expand Down

0 comments on commit 70feae7

Please sign in to comment.