From c26d2e07d06da43cd36119908a40c807be006ae1 Mon Sep 17 00:00:00 2001
From: Konrad du Plessis <konradzar@gmail.com>
Date: Thu, 23 Apr 2026 14:35:20 +0200
Subject: [PATCH] fix(report): auto-open Choices dropdown + make date hint
 readable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two small Checkpoint-1 polish items from Konrad:

(1) 'The projects and team dropdowns open empty, and only after you
    click in the text box do the options appear.'

    Choices.js's default open state has the dropdown closed (is-active
    absent) — the user normally has to click the search input to reveal
    options. But a pill click clearly means 'show me the list,' so we
    now call `showDropdown(true)` on the Choices instance right after
    the popover opens. Deferred via setTimeout(0) so it runs AFTER any
    cross-filter destroy/recreate has settled in the same tick.

(2) 'In the date selection I accidentally saw there is text that is way
    too dark below the From date selector — "Leave blank for a single
    month".'

    The inline style was `opacity: 0.75` on top of Bootstrap's default
    `.form-text` colour (inherits --bs-secondary-color — very dark on
    our dark theme). Replaced with `color: var(--text-tertiary)` + full
    opacity so the hint is readable in both dark and light themes.
    This matches CLAUDE.md's convention of always using theme tokens
    for text that should sit in the 'hint' legibility band.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 core/templates/core/report.html | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/core/templates/core/report.html b/core/templates/core/report.html
index 516aac7..177f233 100644
--- a/core/templates/core/report.html
+++ b/core/templates/core/report.html
@@ -72,7 +72,8 @@
                             <span class="text-muted" style="font-size: 0.6rem; letter-spacing: 0;">(optional)</span>
                         </label>
                         <input type="month" id="popoverFromMonth" class="form-control form-control-sm">
-                        <div class="form-text small" style="font-size: 0.72rem; opacity: 0.75;">
+                        <div class="form-text small"
+                             style="font-size: 0.72rem; color: var(--text-tertiary);">
                             Leave blank for a single month
                         </div>
                     </div>
@@ -665,6 +666,18 @@ document.addEventListener('DOMContentLoaded', function() {
         // teams that never logged on Project X.)
         if (key === 'projects') applyCrossFilter('projects');
         if (key === 'teams') applyCrossFilter('teams');
+
+        // Auto-open the Choices.js dropdown so options are visible
+        // immediately — the pill click means "show me the list." Without
+        // this, the user has to click the search input first, which feels
+        // like an extra step. Deferred one tick so it runs AFTER any
+        // cross-filter destroy/recreate above has settled.
+        if (key === 'projects' && projectsChoices) {
+            setTimeout(function() { projectsChoices.showDropdown(true); }, 0);
+        }
+        if (key === 'teams' && teamsChoices) {
+            setTimeout(function() { teamsChoices.showDropdown(true); }, 0);
+        }
     }
 
     // --- Pill click: toggle popover ---