From 551b4e3da938433db23146265f28ae4ee282713e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Ver=C3=ADssimo?=
 <211358+averissimo@users.noreply.github.com>
Date: Mon, 11 May 2026 14:41:23 +0100
Subject: [PATCH] feat: improvement on badge border

---
 R/module_picks.R              |  1 +
 R/ui_containers.R             |  8 +++++---
 inst/badge-dropdown/script.js |  6 ++++++
 inst/badge-dropdown/style.css | 14 +++++++++++---
 4 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/R/module_picks.R b/R/module_picks.R
index 862ad667..a7e1dbe2 100644
--- a/R/module_picks.R
+++ b/R/module_picks.R
@@ -327,6 +327,7 @@ picks_srv.picks <- function(id, picks, data) {
 .pick_ui_fixed <- function(id, selected) {
   htmltools::tags$div(
     class = "form-group shiny-input-container",
+    style = "visibility: hidden; position: absolute;",
     htmltools::tags$input(
       id = id,
       disabled = "disabled",
diff --git a/R/ui_containers.R b/R/ui_containers.R
index cb17992c..73f65eab 100644
--- a/R/ui_containers.R
+++ b/R/ui_containers.R
@@ -17,7 +17,7 @@ badge_dropdown <- function(id, label, content) {
       htmltools::includeScript(system.file("badge-dropdown", "script.js", package = "teal.picks"))
     )),
     htmltools::tags$div(
-      class = "badge-dropdown-wrapper",
+      class = "badge-wrapper",
       htmltools::tags$span(
         id = ns("summary_badge"),
         class = "badge bg-primary rounded-pill badge-dropdown",
@@ -32,7 +32,7 @@ badge_dropdown <- function(id, label, content) {
         style = htmltools::css(
           visibility = "hidden",
           width = "0",
-          position = "absolute",
+          position = "fixed",
           background = "white",
           border = "1px solid #ccc",
           `border-radius` = "4px",
@@ -61,6 +61,7 @@ badge_fixed <- function(id, label, content) {
       htmltools::includeCSS(system.file("badge-dropdown", "style.css", package = "teal.picks"))
     )),
     htmltools::tags$div(
+      class = "badge-wrapper",
       htmltools::tags$span(
         id = ns("fixed_badge"),
         class = "fixed-picks badge-dropdown",
@@ -69,8 +70,9 @@ badge_fixed <- function(id, label, content) {
       ),
       htmltools::tags$div(
         id = ns("inputs_container"),
+        class = "zero-width-inputs",
         content,
-        style = "visibility: hidden; width: 0; height: 0;"
+        style = "visibility: hidden; width: 0; height: 0; position: fixed;"
       )
     )
   )
diff --git a/inst/badge-dropdown/script.js b/inst/badge-dropdown/script.js
index cd9513ee..a2d208bb 100644
--- a/inst/badge-dropdown/script.js
+++ b/inst/badge-dropdown/script.js
@@ -8,6 +8,7 @@ function toggleBadgeDropdown(summaryId, containerId) {
       container.removeEventListener('transitionend', onHidden);
       container.style.visibility = 'hidden';
       container.style.width = "0";
+      container.style.position = "fixed";
       $(container).trigger('hidden');
       if (container._originalParent) {
         container._originalParent.appendChild(container);
@@ -21,6 +22,10 @@ function toggleBadgeDropdown(summaryId, containerId) {
       container._originalParent = container.parentNode;
     }
 
+    if (container.querySelectorAll('.shiny-input-validation-error').length > 0) {
+      container._originalParent.classList.add("has-validation-error");
+    }
+
     // Position relative to the badge
     var rect = summary.getBoundingClientRect();
     container.style.position = 'absolute';
@@ -44,6 +49,7 @@ function toggleBadgeDropdown(summaryId, containerId) {
     setTimeout(function() {
       function handleClickOutside(event) {
         if (!container.contains(event.target) && !summary.contains(event.target)) {
+          container._originalParent.classList.remove("has-validation-error");
           hideContainer();
           document.removeEventListener('click', handleClickOutside);
         }
diff --git a/inst/badge-dropdown/style.css b/inst/badge-dropdown/style.css
index 703ae190..ad8145a4 100644
--- a/inst/badge-dropdown/style.css
+++ b/inst/badge-dropdown/style.css
@@ -18,11 +18,13 @@
 .badge-dropdown {
   overflow-x: auto;
   padding-right: 0.5rem;
+  border: 2px solid transparent;
 }
 
 .badge-dropdown:has(~ * .shiny-validation-message),
-.badge-dropdown:has(~ * .shiny-output-error) {
-  border: 2px solid red;
+.badge-dropdown:has(~ * .shiny-output-error),
+.badge-wrapper.has-validation-error .badge-dropdown {
+  border: 2px solid var(--bs-danger);
 }
 
 .badge-dropdown-label,
@@ -83,4 +85,10 @@
 
 .fixed-picks i {
   flex-shrink: 0;
-}
\ No newline at end of file
+}
+
+.zero-width-inputs .form-group.shiny-input-container {
+  width: 0;
+  padding: 0;
+  border: none;
+}