From ffac25bae38cd3061020645e012dd4c3a8e7a804 Mon Sep 17 00:00:00 2001
From: Ken Johnson <cktricky@gmail.com>
Date: Tue, 9 Dec 2025 15:04:36 +0000
Subject: [PATCH] Further improve dropdown selection display with enhanced CSS
 and debugging
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added enhanced CSS with !important rules and explicit appearance properties
to ensure the dropdown properly displays the selected recipient name.

Changes:
- Added explicit appearance properties for proper browser rendering
- Added !important to color and background-color rules
- Added styling for option:checked state
- Enhanced JavaScript debugging with value and color logging
- Added hide/show to force visual re-render

The console logs now show:
- Selected recipient name
- Selected value
- Current color CSS property

This should help diagnose and fix the visual display issue.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/views/messages/index.html.erb | 29 ++++++++++++++++++++++-------
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/app/views/messages/index.html.erb b/app/views/messages/index.html.erb
index 1a83d46..ef262a7 100644
--- a/app/views/messages/index.html.erb
+++ b/app/views/messages/index.html.erb
@@ -158,12 +158,18 @@ $(document).on('turbolinks:load', function() {
   makeActive();
 });
 
-// Explicitly handle dropdown selection to ensure display updates
+// Debug and force dropdown to display selected value
 $('#message_receiver_id').on('change', function() {
-  var selectedText = $(this).find('option:selected').text();
+  var $select = $(this);
+  var selectedText = $select.find('option:selected').text();
+  var selectedValue = $select.val();
+
   console.log('Selected recipient:', selectedText);
-  // Force a visual update
-  $(this).blur().focus();
+  console.log('Selected value:', selectedValue);
+  console.log('Current display:', $select.css('color'));
+
+  // Force re-render by temporarily hiding and showing
+  $select.hide().show(0);
 });
 
 // Form submission with AJAX
@@ -317,12 +323,21 @@ $("#submit_button").click(function(event) {
 
   /* Ensure dropdown displays selected value properly */
   #message_receiver_id {
-    color: #212529;
-    background-color: #fff;
+    color: #212529 !important;
+    background-color: #fff !important;
+    -webkit-appearance: menulist !important;
+    -moz-appearance: menulist !important;
+    appearance: menulist !important;
   }
 
   #message_receiver_id option {
-    color: #212529;
+    color: #212529 !important;
+    background-color: #fff !important;
+  }
+
+  #message_receiver_id option:checked {
+    color: #fff !important;
+    background-color: var(--rg-success) !important;
   }
 
   #message_receiver_id:focus {