How to Focus on textinput field in alert combined with modaldialog in R?

问题

I am building a Shiny app in which a user can open a modalDialog by clicking on points in a plot. The modalDialog contains a plot of the raw data behind the point clicked. The user is presented an actionButton linked to code to save the detailed plot in the modalDialog with a sweetalert swal message with an inputfield. The problem is that bootstrap forces focus on the modalDialog, causing the inputfield to be blocked from use for typing.

I have seen some javascipt online that should overwrite the enforcefocus, but I am unable to make this work in R

The dummy code below has the same structure as my main app, and I reduced it as far as possible (might have left a few unneeded libraries, but they are all used in my app, and should not cause problems. All packages are the most recent versions.

The possible solutions use this code:

$.fn.modal.Constructor.prototype.enforceFocus = function () {};

or from bootstrap 4

$.fn.modal.Constructor.prototype._enforceFocus = function() {};

found here: link1 and here: link2

Or a more complicated javascipt approach can be found here: link3

How to make the app focus on the input field, and 2nd, return focus to the modalDialog after sweetalert is closed?

thank you for any help!

APP:

  library(shiny)
  library(shinyjs)
  library(shinyBS)
  library(sweetalertR)
  library(shinyjqui)

  # ui section --------------------------------------------------------------


  jscode <- "
  shinyjs.swalsavepulse = function(params) { 
  var defaultParams = {
  title: null,
  text : null
  };
  params = shinyjs.getParams(params, defaultParams);
  swal({title : params.title, text : params.text,  
  type: 'input',
  inputType : 'text',
  html: true,
  showCancelButton : false,
  showConfirmButton : true,
  closeOnConfirm: true,
  confirmButtonColor: '#339FFF',
  allowOutsideClick: true   },
  evalFunction = function(isConfirm){
  if (isConfirm === true) {
  var val1= 1;
  Shiny.onInputChange('pulsefilename', [val1, Math.random()]);}
  }); 
  };"


  ui <- fluidPage( 
      shinyjs::useShinyjs(),     ### code for the sweetalerts
      shinyjs::extendShinyjs(text = jscode),  ### code for the sweetalerts

      tags$head(
        tags$script(src = "https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.0.1/sweetalert.min.js"),   ### code for the sweetalerts
        tags$link(rel = "stylesheet", type = "text/css",                                                  ### code for the sweetalerts
                  href = "https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.0.1/sweetalert.min.css")    ### code for the sweetalerts
      ),

      actionButton(inputId = "popup", label = "Popup")
      )



  # server section ----------------------------------------------------------

  server <- function(input, output, session) {

    observeEvent(input$popup, {
    pulseModal <- function(failed = FALSE) {         
                modalDialog(
                title = HTML(paste('<span style="color:white; font-size: 16px; font-weight:bold; font-family:sans-serif ">Pulse shape viewer<span>')),
                actionButton(inputId = "message", label = "message"),
                easyClose = TRUE,
                footer = NULL) }

    showModal(div(id= "modalPulse", pulseModal() ))

    jqui_draggable(selector = '.modal-content')
    })

    observeEvent(input$message, {
          shinyjs::js$swalsavepulse(title = '<span style="color:#339FFF; font-size: 30px">Save pulse shape<span>',
                                    text = "Enter file name.")
            })

  }

  shinyApp(ui, server)

回答1:

i don't know if you already fix the problem, but, here is my answer.

I had the same problem, that's because tabindex="-1" on Bootstrap modal.

How i fixed:

// call this before showing SweetAlert:
function fixBootstrapModal() {
  var modalNode = document.querySelector('.modal[tabindex="-1"]');
  if (!modalNode) return;

  modalNode.removeAttribute('tabindex');
  modalNode.classList.add('js-swal-fixed');
}

// call this before hiding SweetAlert (inside done callback):
function restoreBootstrapModal() {
  var modalNode = document.querySelector('.modal.js-swal-fixed');
  if (!modalNode) return;

  modalNode.setAttribute('tabindex', '-1');
  modalNode.classList.remove('js-swal-fixed');
}

I hope this help you.

来源：https://stackoverflow.com/questions/48249608/how-to-focus-on-textinput-field-in-alert-combined-with-modaldialog-in-r

标签

javascript

Shiny

bootstrap-modal

sweetalert