Bindings can't be registered asynchronously #3635
Description
Consider a basic input binding:
# app.R
library(shiny)
incrementButton <- function(inputId, value = 0) {
tagList(
tags$head(tags$script(src = "increment.js")),
tags$button(id = inputId,
class = "increment btn btn-default",
type = "button",
as.character(value))
)
}
ui <- fluidPage(
incrementButton("foo"),
textOutput("foo_value")
)
server <- function(input, output, session) {
output$foo_value <- renderText({
paste("Clicked this many times:", input$foo)
})
}
shinyApp(ui, server)// www/increment.js
$(document).on("click", "button.increment", function(evt) {
// evt.target is the button that was clicked
var el = $(evt.target);
// Set the button's text to its current value plus 1
el.text(parseInt(el.text()) + 1);
// Raise an event to signal that the value changed
el.trigger("change");
});
var incrementBinding = new Shiny.InputBinding();
$.extend(incrementBinding, {
find: function(scope) {
return $(scope).find(".increment");
},
getValue: function(el) {
return parseInt($(el).text());
},
setValue: function(el, value) {
$(el).text(value);
},
subscribe: function(el, callback) {
$(el).on("change.incrementBinding", function(e) {
callback();
});
},
unsubscribe: function(el) {
$(el).off(".incrementBinding");
}
});Now, if we register synchronously all is fine, but not if we register in a setTimeout(), the binding doesn't bind to the DOM:
setTimeout(() => { Shiny.inputBindings.register(incrementBinding); }, 100);That use case may seem contrived, but becomes a real problem if you're trying to load JS dependencies asynchronously (e.g., via requirejs) to define/register the binding:
incrementButton <- function(inputId, value = 0) {
tagList(
tags$head(
tags$script(src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"
tags$script(src = "increment.js")
),
tags$button(id = inputId,
class = "increment btn btn-default",
type = "button",
as.character(value))
)
}require.config({paths: {"lodash": "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min"}});
require(["lodash"], function(_) {
const finalBinding = _.last([incrementBinding]);
Shiny.inputBindings.register(finalBinding);
})