使用 shinyjs::reset 重置自定义输入 shiny R

Question

I have a shiny module for a customized input, and i'm trying to add a button to reset this custom input (both interface and server) every time this button is clicked. Below is an example using shinyjs::reset:

app.R

    library(shinyjs)
library(rintrojs)
library(shinydashboard)
library(shinyWidgets)

source("customTextInput.R", local = TRUE, encoding = "UTF-8")

ui <- fluidPage(

    useShinyjs(),

    # Assembling page
    dashboardPage(

        # Assembling header
        dashboardHeader(title = "Custom Inputs", titleWidth = 1294), 

        # Assembling sidebar
        dashboardSidebar(

            sidebarMenu(
                menuItem("Custom inputs reset", tabName = "custom", icon = icon("search"))
            )

        ),
        # Assembling the body of the page
        dashboardBody(

            tabItems(
                tabItem(tabName = "custom",
                        br(),
                        br(),
                        customTextInputUI("text1"),
                        fluidPage(

                            textInput(inputId = "text2", label = "Native text input", width = "100%"),
                            actionButton(inputId = "reseter1", label = "Reset custom"),
                            actionButton(inputId = "reseter2", label = "Reset native")

                        ),
                )

            ) 

        )

    )
)

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

    {### Reset -----

        observe({

            shinyjs::onclick("reseter1", {
                reset("text1")
            })

        })

        observe({

            shinyjs::onclick("reseter2", {
                reset("text2")
            })

        })

    }

}

shinyApp(ui, server)

customTextInput.R

library(shinyjs)


{# UI Module -----

    customTextInputUI <- function(id, addWidth = "100%", addHeight="64px", addTop="5px", addValue = "") {

        if (is.null(addValue)){addValue <- ""}

        ns <- NS(id)

        return(

                fluidPage(

                    HTML(

                        sprintf(

"
<form id='%s' autocomplete='off' class = 'form-group shiny-input-container' style = 'padding-top:%s; width:%s; height:%s;'>
    <label for='%s'>Custom text input</label>
        <input charset='UTF-8' type='text' class = 'form-control' 
        id='%s' data-slots=' ' value = \"%s\"  
        data-shinyjs-resettable-id='%s' data-shinyjs-resettable-type='Text' data-shinyjs-resettable-value='' required>
</form>", ns('textBloco'), addTop, addWidth, addHeight, ns('textInput'), ns('textInput'), addValue, ns('textInput')))

                )

          )

    }

}

In this case, reseter2 can reset shiny text2 native textInput, however reseter1 cannot reset custom input text1.

Why there's such unexpected behavior? Is there any workaround for it, maybe using pure javascript?

Thank you in advance !

Answer 1

If you check the input id for text1 then you will see this is displayed as text1-textBloco

So to get your reset to work you can update it as reset("text1-textBloco") then it should work.

Alternatively, you could update the customerTextInput.R where it has ns('textBloco') inside sprintf to just id then it should work with reset("text1") in app.R . So sprintf() will be something like:

sprintf(    
            "
<form id='%s' autocomplete='off' class = 'form-group shiny-input-container' style = 'padding-top:%s; width:%s; height:%s;'>
    <label for='%s'>Custom text input</label>
        <input charset='UTF-8' type='text' class = 'form-control' 
        id='%s' data-slots=' ' value = \"%s\"  
        data-shinyjs-resettable-id='%s' data-shinyjs-resettable-type='Text' data-shinyjs-resettable-value='' required>
</form>", id, addTop, addWidth, addHeight, ns('textInput'), ns('textInput'), addValue, ns('textInput')))

      )