Further improve dropdown selection display with enhanced CSS and debugging

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>
This commit is contained in:
Ken Johnson
2025-12-09 15:04:36 +00:00
parent 65e42ceee3
commit ffac25bae3
+22 -7
View File
@@ -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 {