Revert to visibility css property and allows fixed picks to show error

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,

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,18 +53,25 @@ 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(
     htmltools::singleton(htmltools::tags$head(
       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;"
+      )
     )
   )
 }

inst/badge-dropdown/script.js

@@ -6,15 +6,16 @@ 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);
       }
     });
   }
 
-  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();