Add patch for not triggering click on selectize

This commit is contained in:
Winston Chang
2020-12-16 17:57:43 -06:00
parent 98eb1b596d
commit 2c6f830223
4 changed files with 40 additions and 0 deletions

View File

@@ -0,0 +1,40 @@
diff --git a/inst/www/shared/selectize/accessibility/js/selectize-plugin-a11y.js b/inst/www/shared/selectize/accessibility/js/selectize-plugin-a11y.js
index a3d57c9e..990d6dea 100644
--- a/inst/www/shared/selectize/accessibility/js/selectize-plugin-a11y.js
+++ b/inst/www/shared/selectize/accessibility/js/selectize-plugin-a11y.js
@@ -123,7 +123,34 @@ Selectize.define("selectize-plugin-a11y", function (options) {
self.$control.on("keydown", function (e) {
if (e.keyCode === KEY_RETURN) {
- $(this).click();
+
+ if (self.settings.openOnFocus) {
+ // This is the common case, where openOnFocus is true. When the user
+ // presses Enter to select an item, the default behavior is to close
+ // the dropdown and have the input lose focus. However, losing focus
+ // is poor behavior for accessibility.
+ //
+ // If `.focus()` is called after a selection is made, the default
+ // (when openOnFocus is true) is to show the dropdown, but this is
+ // annoying for sighted users, because they would expect the
+ // dropdown to not be visible after making a selection, and they
+ // then need to press Esc to make it go away.
+ //
+ // This workaround sets openOnFocus to false, then calls `.focus()`,
+ // then, after a delay, sets openOnFocus back to true. It seems that
+ // the `setTimeout()` must be called after `.focus()` for it to work
+ // reliably, even with a delay of up to 10. If it is called before
+ // `.focus()`, then after pressing Enter, the dropdown still
+ // appears. I think this is probably because `.focus()` in turn
+ // calls `setTimeout(, 0)` to do things, calling the functions in
+ // this order is necessary to ensure that the callbacks are invoked
+ // in the same order.
+ self.settings.openOnFocus = false;
+ self.focus();
+ setTimeout(function() { self.settings.openOnFocus = true; }, 0);
+ } else {
+ self.focus();
+ }
}
});