From 17f6316353bbacd90bf5f85f2cac4acc9199769c Mon Sep 17 00:00:00 2001
From: Brock H Caldwell <brock@caldwellnetworks.com>
Date: Sun, 6 Jul 2025 12:19:37 -0500
Subject: [PATCH] fix: better styles for active option

---
 assets/controllers/search_bar_controller.js | 3 +++
 assets/styles/app.css                       | 2 +-
 templates/components/SearchBar.html.twig    | 9 ++++++++-
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/assets/controllers/search_bar_controller.js b/assets/controllers/search_bar_controller.js
index dd94bd3..01e3bf1 100644
--- a/assets/controllers/search_bar_controller.js
+++ b/assets/controllers/search_bar_controller.js
@@ -24,6 +24,9 @@ export default class extends Controller {
             const params = value.split('|')
             window.location.href = `/result/${params[0]}/${params[1]}`
         };
+        event.detail.options.onType = (searchQuery) => {
+            console.log(this.element);
+        }
         event.detail.options.render.loading = (data, escape) => {
             return `
             <span data-controller="loading-icon" data-loading-icon-total-value="52" data-loading-icon-count-value="20" class="loading-icon">
diff --git a/assets/styles/app.css b/assets/styles/app.css
index 3cf7b9d..2ff5d77 100644
--- a/assets/styles/app.css
+++ b/assets/styles/app.css
@@ -120,5 +120,5 @@ dialog[data-dialog-target="dialog"][closing] {
 
 #search .ts-dropdown .ts-dropdown-content .option.active {
     background: unset;
-    @apply hover:bg-orange-500/80 active:bg-orange-500/80 text-black rounded-md
+    @apply bg-orange-500/80 text-black font-bold rounded-md
 }
diff --git a/templates/components/SearchBar.html.twig b/templates/components/SearchBar.html.twig
index d4c4616..bcd2695 100644
--- a/templates/components/SearchBar.html.twig
+++ b/templates/components/SearchBar.html.twig
@@ -2,7 +2,14 @@
     <div class="relative">
         <form id="search" action="{{ path('app_search') }}">
             <select
-                    {{ stimulus_controller('search_bar')|stimulus_controller('symfony/ux-autocomplete/autocomplete', {url: path('api_tmdb_ajax_search'), create: false, highlight: false}) }}
+                    {{ stimulus_controller('search_bar')|stimulus_controller('symfony/ux-autocomplete/autocomplete', {
+                        url: path('api_tmdb_ajax_search'),
+                        create: false,
+                        tomSelectOptions: {
+                            highlight: false,
+                        }
+                    }) }}
+                    id="term"
                     name="term"
                     class="w-full bg-orange-500 rounded-md bg-clip-padding backdrop-filter
                          backdrop-blur-md bg-opacity-40 placeholder:text-slate-200 text-gray-50