0

In a Shiny app running in a web browser (or at least in Microsoft Edge), if you click a button and don't click anything else, pressing the enter key will mimic the effects of clicking that button.

I would like to disable this effect because I have added JavaScript to my Shiny app that makes the enter key confirm changes made in an entry field. Currently, a user can load a set of files by clicking the "files" button, enter the index of the file they wish to display, and press enter to confirm that entry and display the file.

The problem I am having is that when the user presses enter to display the file, if they have not clicked anything after clicking the "files" button, their file is displayed but additionally the "files" button is triggered, opening the File Explorer. I want to prevent the "files" button (and any other buttons) from being triggered by the enter key.

I have tried adding:

  tags$script('
  $("files").keypress(function(e){
    if(e.keyCode === 13){
      e.preventDefault();
    }
  });
  '),

to my ui <- fluidPage() to no effect ("files" is the name of the button that selects files to import).

I have also tried using features that simulate pressing a button located offscreen that does nothing (called "mouseGrabber"), including:

tags$script('
$(document).on("keyup", function(e) {
  if(e.keyCode == 38){
    document.getElementById("mouseGrabber").click();
  }
});
')

I have verified that pressing the up arrow (e.keyCode == 38) triggers "mouseGrabber" by giving it a temporary effect, but this does not change the button that the enter key focuses on; the enter key still triggers the last button that was actually clicked by the user.

I have also tried simulating a mouse click at certain coordinates (see How to simulate a mouse click using JavaScript?) but I don't think my implementation of the accepted answer's JavaScript code in Shiny was successful--regardless of the options I used for a simulated click, I could not produce any indication that a click had occurred.

If it would be helpful, I could prepare sample code to demonstrate the problem. I appreciate any response!

christopho
  • 61
  • 4

1 Answers1

1

The first related question solved my problem--I'm not sure why I couldn't find it sooner. Credit to Peter Mortensen and user83632 from Prevent users from submitting a form by hitting Enter

Here's the solution:

  tags$script('
  $(document).ready(function() {
    $(window).keydown(function(event){
      if(event.keyCode == 13) {
        event.preventDefault();
        return false;
      }
    });
  });
  '),

Add this to your ui <- fluidPage() and the enter key won't ever trigger buttons unless you add scripts specifically telling it to.

christopho
  • 61
  • 4