Clear selectizeInput box with backspace button (maxItems = 1) and troubles with Mozilla Firefox

Question

I have a shinyapp with multiple selectizeInput widgets. For most of them the user can input just one choice. My issues:

a first small problem is that I don't know how to keep my field active after the user selection, as it happens when the choices selected are multiple (i. e. with the cursors still inside the box). This would be useful if a user enter a choice but decides immediately to clear it with the backspace button on his keyboard;
ok, the backspace may not work in this case, but this is an important issue when using a shinyapp like this on Mozilla Firefox. In fact, if the user selects a choice and then "instinctively" press backspace to clear it, the web page is reloaded and all other selections are lost.

Below there's an example of one of the selectizeInput widget present in my shinyapp:

selectizeInput(inputId = "country_study",
               label = h6("Country"),
               choices = c("China" = "",
                           "China", "India", "Iran"),
               selected = "",
               multiple = FALSE,
               options = list(create = FALSE))

To recap, the user can select just one choice, but I would like to make him able to delete this choice directly with the backspace button on his keyboard without having to activate the widget again through the mouse.

If this is not possible, how can I deal with that strange behaviour on Mozilla Firefox?

Thanks a lot!

nd091680 nd091680 · Accepted Answer · 2019-09-17T08:46:59

I found a solution thanks to another stackoverflow post that you can find here.

At the beginning of your fluidPage simply add:

tags$head(includeScript("disable_backspace.js")),

In your App directory create the "disable_backspace.js" file from the text editor and paste inside it this code:

$(function(){
/*
 * this swallows backspace keys on any non-input element.
 * stops backspace -> back
 */
var rx = /INPUT|SELECT|TEXTAREA/i;

$(document).bind("keydown keypress", function(e){
    if( e.which == 8 ){ // 8 == backspace
        if(!rx.test(e.target.tagName) || e.target.disabled || e.target.readOnly ){
            e.preventDefault();
        }
    }
}); });

Credits to thetoolman for this solution.

Clear selectizeInput box with backspace button (maxItems = 1) and troubles with Mozilla Firefox

1 Answers