Как сосредоточиться на поле ввода текста в предупреждении в сочетании с modaldialog в R?

1

Я modalDialog app Shiny app в котором пользователь может открыть modalDialog, щелкнув точки в сюжете. В modalDialog содержится график необработанных данных за точкой, нажатой. Пользователю представлен actionButton связанный с кодом, чтобы сохранить подробный сюжет в modalDialog с сообщением sweetalert swal с inputfield. Проблема в том, что силы bootstrap сосредотачиваются на modalDialog, заставляя входное поле блокироваться от использования для ввода.

Я видел несколько javascipt онлайн, которые должны перезаписать actioncefocus, но я не могу сделать эту работу в R

Фиктивный ниже код имеет такую же структуру, как и мое основное приложение, и я уменьшил его, насколько это возможно (возможно, оставило несколько ненужных libraries, но все они используются в моем app, и не должен вызывать проблемы. Все packages являются наиболее последние версии.

Возможные решения используют этот код:

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

или из бутстрапа 4

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

здесь: link1 и здесь: link2

Или более сложный подход javascipt можно найти здесь: link3

Как заставить app сосредоточиться на поле input, а второй - вернуть фокус в modalDialog после того, как sweetalert закрыт?

Спасибо за любую помощь!

ПРИЛОЖЕНИЕ:

  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)
  • 0
    Когда вы найдете решение, которое в конечном итоге используете, вы должны опубликовать это решение как собственный ответ и принять его.
Теги:
bootstrap-modal
shiny
sweetalert

1 ответ

0
Лучший ответ

Я не знаю, исправлена ли эта проблема, но вот мой ответ.

У меня была та же проблема, что и tabindex="-1" на Bootstrap modal.

Как я исправил:

// 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');
}

Надеюсь, это поможет вам.

Поделиться
  • 0
    Этот код не работает в R. Я ищу ответ, который превращает один из предложенных кодов в моем вопросе, или этот код от вас в рабочий код R
  • 0
    Думаю, ты не знаешь, как его адаптировать, Пинфилди?
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню