diff --git a/R/module_picks.R b/R/module_picks.R index 8c218817..862ad667 100644 --- a/R/module_picks.R +++ b/R/module_picks.R @@ -62,7 +62,7 @@ picks_ui.picks <- function(id, picks, container) { if (missing(container)) { htmltools::tags$div( if (all(vapply(picks, is_pick_fixed, logical(1)))) { - badge_fixed(id = ns("inputs"), badge_label) + badge_fixed(id = ns("inputs"), badge_label, htmltools::tagList(content)) } else { badge_dropdown(id = ns("inputs"), label = badge_label, htmltools::tagList(content)) } @@ -182,6 +182,7 @@ picks_srv.picks <- function(id, picks, data) { args <- attributes(picks[[slot_name]]) args <- args[!names(args) %in% c("names", "class")] + .pick_srv( id = slot_name, pick_type = slot_name, @@ -254,7 +255,7 @@ picks_srv.picks <- function(id, picks, data) { .validate_is_eager(choices()) .validate_is_eager(selected()) if (!length(choices()) || isTRUE(args$fixed)) { - NULL + .pick_ui_fixed(session$ns("selected"), selected()) } else if (.is_ranged(choices()) && inherits(choices(), "Date")) { .pick_ui_date( session$ns("range"), @@ -290,7 +291,7 @@ picks_srv.picks <- function(id, picks, data) { args = args[!names(args) %in% c("multiple")] ) } - }) |> bindEvent(choices()) # never change on selected() + }) |> bindEvent(choices(), ignoreNULL = FALSE) # never change on selected() # for numeric / date / posixct range range_debounced <- shiny::reactive(input$range) |> debounce(1000) @@ -323,6 +324,17 @@ picks_srv.picks <- function(id, picks, data) { }) } +.pick_ui_fixed <- function(id, selected) { + htmltools::tags$div( + class = "form-group shiny-input-container", + htmltools::tags$input( + id = id, + disabled = "disabled", + value = selected + ) + ) +} + .pick_ui_date <- function(id, label, choices, selected, args) { shiny::dateRangeInput( inputId = id, diff --git a/R/ui_containers.R b/R/ui_containers.R index fd1adf42..cb17992c 100644 --- a/R/ui_containers.R +++ b/R/ui_containers.R @@ -30,7 +30,8 @@ badge_dropdown <- function(id, label, content) { content, id = ns("inputs_container"), style = htmltools::css( - display = "none", + visibility = "hidden", + width = "0", position = "absolute", background = "white", border = "1px solid #ccc", @@ -52,7 +53,7 @@ badge_dropdown <- function(id, label, content) { #' @param label (`shiny.tag`) Label displayed on the component #' @keywords internal #' @noRd -badge_fixed <- function(id, label) { +badge_fixed <- function(id, label, content) { ns <- shiny::NS(id) htmltools::tagList( @@ -60,10 +61,17 @@ badge_fixed <- function(id, label) { htmltools::includeCSS(system.file("badge-dropdown", "style.css", package = "teal.picks")) )), htmltools::tags$div( - id = ns("fixed_badge"), - class = "fixed-picks", - htmltools::tags$label(label), - htmltools::tags$i(bsicons::bs_icon("lock-fill")) + htmltools::tags$span( + id = ns("fixed_badge"), + class = "fixed-picks badge-dropdown", + htmltools::tags$label(label), + htmltools::tags$i(bsicons::bs_icon("lock-fill")) + ), + htmltools::tags$div( + id = ns("inputs_container"), + content, + style = "visibility: hidden; width: 0; height: 0;" + ) ) ) } diff --git a/inst/badge-dropdown/script.js b/inst/badge-dropdown/script.js index 667003e3..cd9513ee 100644 --- a/inst/badge-dropdown/script.js +++ b/inst/badge-dropdown/script.js @@ -6,7 +6,8 @@ function toggleBadgeDropdown(summaryId, containerId) { container.style.opacity = '0'; container.addEventListener('transitionend', function onHidden() { container.removeEventListener('transitionend', onHidden); - container.style.display = 'none'; + container.style.visibility = 'hidden'; + container.style.width = "0"; $(container).trigger('hidden'); if (container._originalParent) { container._originalParent.appendChild(container); @@ -14,7 +15,7 @@ function toggleBadgeDropdown(summaryId, containerId) { }); } - if (container.style.display === 'none' || container.style.display === '') { + if (container.style.visibility === 'hidden' || container.style.visibility === '') { // Record original parent before moving to body if (!container._originalParent) { container._originalParent = container.parentNode; @@ -29,7 +30,8 @@ function toggleBadgeDropdown(summaryId, containerId) { document.body.appendChild(container); container.style.opacity = '0'; - container.style.display = 'block'; + container.style.visibility = 'visible'; + container.style.width = "auto"; // Force reflow so the browser registers opacity: 0 before transitioning to 1 container.getBoundingClientRect();