Binding problem when there is encapsulation within "column( ..., conditionalPanel( ... "

[djacob65]

Here is a simple Shiny application

library(shiny)

ui <- fluidPage(
column(9, style = "padding:0px 10px 0px 0px;",
conditionalPanel(
condition = "input.fusrctmax == 0",
selectInput("ctmax", "Maximum contact time :",
choices = c("500","1000","2000","5000","10000"),
selected = "10000")
),
conditionalPanel(
condition = "input.fusrctmax == 1",
numericInput("usrctmax", "Maximum contact time", value = 10000)
)
),
checkboxInput("fusrctmax", "User", FALSE),
verbatimTextOutput("debug")
)

server <- function(input, output, session) {
observeEvent(input$fusrctmax, {
if (input$fusrctmax)
updateNumericInput(session, "usrctmax", value = as.numeric(isolate(input$ctmax)))
else
updateSelectInput(session, "ctmax", selected = isolate(input$usrctmax))
})

output$debug <- renderText({
paste("fusrctmax:", input$fusrctmax,
"| ctmax:", input$ctmax,
"| usrctmax:", input$usrctmax)
})
}

shinyApp(ui, server)

When the checkbox is checked, the numerical input does not allows me to change values !?!

Why ?

Thanks
Daniel

[djacob65]

In fact, you must first click on the edge of the numeric box for it to be selected and then you can modify its content.

Daniel

[ismirsehregal]

The issue seems to be, that you are using column() without wrapping it with fluidRow() (or fixedRow()).

Please check the following:

library(shiny)

ui <- fluidPage(
  fluidRow(column(9, style = "padding:0px 10px 0px 0px;",
                  conditionalPanel(
                    condition = "input.fusrctmax == 0",
                    selectInput("ctmax", "Maximum contact time :",
                                choices = c("500","1000","2000","5000","10000"),
                                selected = "10000")
                  ),
                  conditionalPanel(
                    condition = "input.fusrctmax == 1",
                    numericInput("usrctmax", "Maximum contact time", value = 10000)
                  )
  )),
  checkboxInput("fusrctmax", "User", FALSE),
  verbatimTextOutput("debug")
)

server <- function(input, output, session) {
  observeEvent(input$fusrctmax, {
    if (input$fusrctmax)
      updateNumericInput(session, "usrctmax", value = as.numeric(isolate(input$ctmax)))
    else
      updateSelectInput(session, "ctmax", selected = isolate(input$usrctmax))
  })
  
  output$debug <- renderText({
    paste("fusrctmax:", input$fusrctmax,
          "| ctmax:", input$ctmax,
          "| usrctmax:", input$usrctmax)
  })
}

shinyApp(ui, server)

[djacob65]

Yes it works !

But in my application, it was also the case. Here is a modified example :

ui <- fluidPage( fluidRow(
column(2, style="height : 400px; background-color:#f9faff;overflow:auto;",
column(8, style = "padding:0px 10px 0px 0px;",
conditionalPanel(
condition = "input.fusrctmax == 0",
selectInput("ctmax", "Maximum contact time :",
choices = c("500","1000","2000","5000","10000"),
selected = "10000")
),
conditionalPanel(
condition = "input.fusrctmax == 1",
numericInput("usrctmax", "Maximum contact time", value = 10000)
)
),
tags$br(), checkboxInput("fusrctmax", "User", FALSE),
),
column(10,
verbatimTextOutput("debug")
)
))

This does not work (i.e. impossible the numerical input value), whereas we remove the tags$br() before the checkboxInput(...), this works, at least on my desktop. Very strange !

[ismirsehregal]

The latest UI code you sent works fine for me.

[djacob65]

@ismirsehregal You mean that when you click just in the middle in the numerical box this focuses the box ? with and without the "tags$br()" before the checkbox ? In my case, it works like that solely if I remove the "tags$br()" before the checkbox. Otherwise I have to click on the border of the numerical box to focus it.

Here is my config:

Google Chrome Version 149.0.7827.156 (Official Build) (64-bit)

R version 4.3.1 (2023-06-16 ucrt)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 11 x64 (build 26200)

R shiny 1.14.0

loaded via a namespace (and not attached):
digest_0.6.37 later_1.3.2 R6_2.6.1 httpuv_1.6.11 fastmap_1.2.0 magrittr_2.0.3 cachem_1.1.0 memoise_2.0.1 htmltools_0.5.7 lifecycle_1.0.4 promises_1.5.0 cli_3.6.2 xtable_1.8-4 sass_0.4.9 withr_3.0.2 jquerylib_0.1.4 compiler_4.3.1 tools_4.3.1 bslib_0.6.1 mime_0.13 Rcpp_1.0.12 otel_0.2.0 jsonlite_2.0.0 rlang_1.2.0

[djacob65]

@ismirsehregal Try my app on line : https://ssnmr.sk8.inrae.fr/
Just click on "Try with an example", then check the "User" case. If you click just in the middle on the numerical box, you lost the focus on it. I solved this in part by putting an event listener :

document.getElementById('usrctmax').addEventListener('mouseover', function() { this.focus(); });

[djacob65]

Claude AI found the solution.

This is a classic HTML/CSS rendering bug caused by overlapping elements. The tags$br() element adds spacing that shifts the layout, causing the checkboxInput to visually overlap the numericInput and intercept clicks made in the center.

Why does this happen?
The conditionalPanel associated with the condition input.fusrctmax == 1 remains in the DOM even when hidden (it simply has the display: none property applied). The tags$br() element causes a visual shift of the subsequent checkboxInput onto the numericInput, creating a dead zone in the center.

Solution: Force the z-index on the conditionalPanel:

conditionalPanel(condition="input.fusrctmax == 1",
	style = "position: relative; z-index: 10;",
	numericInput(inputId = "usrctmax",
	label = "Maximum contact time",
	value = 10000)
)