Fix Date Range Filter: Use native Select element to fix broken dropdown list

static/css/custom_v2.css

@@ -26,11 +26,12 @@ h1, h2, h3, h4, h5, h6 {
     flex-direction: row !important;
     align-items: center !important;
     justify-content: space-between !important;
-    flex-wrap: nowrap !important; /* Ensure they stay on one line */
+    flex-wrap: nowrap !important;
     gap: 2px !important;
     width: 100% !important;
     box-sizing: border-box !important;
-    /* overflow: hidden; Removed to allow dropdown list to show */
+    position: relative !important;
+    z-index: 100 !important;
 }
 
 /* Hide any stray shortcuts that might have survived JS cleanup */
@@ -39,14 +40,21 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .masar-date-filter-row select {
+    appearance: auto !important; /* Force native dropdown appearance */
+    -webkit-appearance: auto !important;
+    -moz-appearance: auto !important;
+    
     width: 32% !important;
     min-width: 0 !important;
     font-size: 11px !important;
-    padding: 0 2px !important;
+    padding: 2px !important; /* Relaxed padding */
     height: 28px !important;
-    line-height: 1 !important;
     box-sizing: border-box !important;
     margin: 0 !important;
+    background-color: white !important;
+    border: 1px solid #ced4da !important;
+    border-radius: 4px !important;
+    color: #495057 !important;
 }
 
 .masar-date-filter-row input {
@@ -57,22 +65,23 @@ h1, h2, h3, h4, h5, h6 {
     height: 28px !important;
     margin: 0 !important;
     box-sizing: border-box !important;
+    background-color: white !important;
+    border: 1px solid #ced4da !important;
+    border-radius: 4px !important;
 }
 
 /* Specific fix for date inputs to ensure they look clean */
 .masar-date-filter-row input[type="date"] {
-    -webkit-appearance: none; /* Remove some browser defaults */
-    appearance: none;
     line-height: 28px;
 }
 .masar-date-filter-row input[type="date"]::-webkit-inner-spin-button,
 .masar-date-filter-row input[type="date"]::-webkit-calendar-picker-indicator {
-    /* Make the calendar icon smaller and fit */
     width: 12px;
     height: 12px;
     margin: 0;
     padding: 0;
     opacity: 0.6;
+    cursor: pointer;
 }
 
 

static/js/admin_date_range_dropdown.js

@@ -1,7 +1,7 @@
 (function($) {
-    // Masar Date Range Filter Layout Fix v4
+    // Masar Date Range Filter Layout Fix v5
     // Forces a horizontal layout for the Date Range Filter in Django Admin Sidebar
-    // v4: Switches to type="date", removes Django's calendar shortcuts to prevent layout breakage.
+    // v5: Removes Bootstrap classes from Select to ensure native popup works reliably.
 
     function initDateRangeDropdown() {
         
@@ -30,7 +30,8 @@
             var $wrapper = $('<div class="masar-date-filter-row"></div>');
             
             // Create the Quick Select Dropdown
-            var $select = $('<select class="form-control custom-select admin-date-dropdown">' +
+            // REMOVED 'form-control' and 'custom-select' to prevent Bootstrap/AdminLTE from interfering with click/rendering
+            var $select = $('<select class="admin-date-dropdown">' +
                 '<option value="any">Any</option>' +
                 '<option value="today">Today</option>' +
                 '<option value="7days">7 Days</option>' +
@@ -39,7 +40,6 @@
                 '</select>');
             
             // CONVERT INPUTS TO HTML5 DATE
-            // This gives us a native picker and removes the need for Django's clunky JS shortcuts
             $gte.attr('type', 'date').removeClass('vDateField');
             $lte.attr('type', 'date').removeClass('vDateField');
 
@@ -53,8 +53,6 @@
             $wrapper.append($lte);
 
             // 3. AGGRESSIVE CLEANUP
-            // Remove text nodes, BRs, AND Django's calendar shortcuts (.datetimeshortcuts)
-            // We search the *original parent* for these leftovers.
             $parent.contents().filter(function() {
                 return (
                     (this.nodeType === 3 && $.trim($(this).text()) !== '') || // Text
@@ -63,9 +61,6 @@
                 );
             }).remove();
 
-            // Also hide any shortcuts that might be dynamically appended later (via CSS rule or observer)
-            // But removing the 'vDateField' class above usually prevents Django from initializing them.
-
             // Logic for Dropdown Changes
             function formatDate(d) {
                 var year = d.getFullYear();
@@ -87,7 +82,7 @@
                 var today = new Date();
 
                 if (val === 'custom') {
-                    // Do nothing, let user edit
+                    // Do nothing
                 } else {
                     if (val === 'any') {
                         $gte.val('');