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 37bf850
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) {
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) {
Expand Down Expand Up @@ -2043,6 +2053,7 @@

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


Expand Down

0 comments on commit 37bf850

Please sign in to comment.