insertUI not inserting with period in selector

[syzdekbr]

insertUI does not insert when there is a period in selector id. The shiny widget is rendered and a period is acceptable in input name, but not for insertUI. Is this expected? Is the period telling selector the text following is a class? Periods are valid in html id names, so would be helpful to note this invalid character.

shiny::runGist("69bd42177ad38b1272faaa7970eafb53")

library(shiny)

ui <- fluidPage(

        mainPanel(
           textInput(inputId = "abc", label = "first"),
           textInput(inputId = "abc.1", label = "second")
        )
)

server <- function(input, output) {

    observeEvent(input$abc,{
        print("output_works_first")
        insertUI(
            selector = "#abc",
            where ="afterEnd",
            ui = tags$div(tags$h4("Works"))
        )
    })
    
    observeEvent(input$abc.1,{
        print("output_works_second")
        insertUI(
            selector = "#abc.1",
            where ="afterEnd",
            ui = tags$div(tags$h4("Doesn't work"))
        )
    })
}

# Run the application 
shinyApp(ui = ui, server = server)

[ismirsehregal]

Note

You are not recommended to use special JavaScript characters such as a period . in the input id's, but if you do use them anyway, for example, inputId = "foo.bar" , you will have to use input["foo.bar"] instead of input.foo.bar to read the input value.

Conditional Panel — conditionalPanel

[nirgrahamuk]

I think in additional to ismirsehregals information about how to make shiny responsive to changed in awkwardly named inputs, there is an even more general pure CSS issue which even if you werent using shiny you would face with that kind of id name. the CSS selector you would need to write to grab it would look like

 [id='abc.1']

rather than

#abc.1

Given these complications, its best to not be tempted to use . in your name choices. the humble underscore is available ... abc_1

[syzdekbr]

Thanks. The period in the inputId does not seem to be a problem for referencing the input. In my example the observeEvent with input$abc.1 triggers the event, as evidenced by the print statement that appears in console. That's part of the reason I didn't recognize the problem using that id for insertUI. But your point is noted for other problems it may create.

[syzdekbr]

Yes, I'm not attached to periods now that I know these problems. BTW, I could not select the id with period with the CSS selector you recommended [id='abc.1'] for CSS styling, but I could with a double slash escape before period #abc\\.1.