Shiny - switch between fields by tab

Question

I use this Shinyalert in my Shiny app:

library(shiny)
library(shinyalert)

ui <- fluidPage(
  useShinyalert()
)

server <- function(input, output) {
  shinyalert(
    title = " ",
    type = "info",
    confirmButtonText = "ok",
    showCancelButton = TRUE,
    showConfirmButton = TRUE,
    confirmButtonCol = "#6DBADE",
    size = "m", 
    closeOnEsc = TRUE,
    closeOnClickOutside = TRUE,
    animation = TRUE,  
    html = TRUE,
    text =  
      
      
      
      div(HTML("
    
<form style = ' display:flex; flex-direction: row; justify-content: center; align-items: center' action=''>
<div style='border: 5px  black;'>
<input type='text'name='add_nosha_tohen' autocomplete='off' id='add_nosha_tohen' value=''   dir='rtl' style='border-color: black; font-size: 12px;height: 45px; width: 400px; display: block;'/></input>
<input type='text'name='add_nosha_tohen' autocomplete='off' id='add_nosha_tohen' value=''   dir='rtl' style='border-color: black; font-size: 12px;height: 45px; width: 400px; display: block;'/></input>
<input type='text'name='add_nosha_tohen' autocomplete='off' id='add_nosha_tohen' value=''   dir='rtl' style='border-color: black; font-size: 12px;height: 45px; width: 400px; display: block;'/></input>
</div>
</form>
"
      ))
  )
}

shinyApp(ui, server)

How can I switch between the fields by Tab? I didn't find any solution, I want to click on tab in my keyboard and go to the second field

Yes. The tab is "trapped" in the `div` that contains the buttons. It did not even work when I used the [solution proposed by the author](https://github.com/daattali/shinyalert#shiny-inputsoutputs-in-modals). I'd write a bug report and/or switch to a modal dialog native to Shiny. — Jan, Jun 27 '22 at 18:48

score 1 · Accepted Answer · answered Jun 27 '22 at 21:32

Use shinyWidgets instead. Shinyalert sometimes have these weird issues, for example like this one How to skip elements in chaining modal approach (shinyalert library)?, so I always use sweetAlert from shinyWidgets. Just my personal preference, not saying Shinyalert is bad.

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
)

server <- function(input, output, session) {
    ask_confirmation(
        "form1",
        title = " ",
        type = "question",
        btn_labels = c("Cancel", "OK"),
        allowEscapeKey = TRUE,
        closeOnClickOutside = TRUE,
        html = TRUE,
        text =  
            div(HTML("
    
<form style = ' display:flex; flex-direction: row; justify-content: center; align-items: center' action=''>
<div style='border: 5px  black;'>
<input type='text'name='add_nosha_tohen' autocomplete='off' id='add_nosha_tohen' value=''   dir='rtl' style='border-color: black; font-size: 12px;height: 45px; width: 400px; display: block;'/></input>
<input type='text'name='add_nosha_tohen' autocomplete='off' id='add_nosha_tohen' value=''   dir='rtl' style='border-color: black; font-size: 12px;height: 45px; width: 400px; display: block;'/></input>
<input type='text'name='add_nosha_tohen' autocomplete='off' id='add_nosha_tohen' value=''   dir='rtl' style='border-color: black; font-size: 12px;height: 45px; width: 400px; display: block;'/></input>
</div>
</form>
"
            ))
    )
}

shinyApp(ui, server)

Shiny - switch between fields by tab

1 Answers1