Only show list of translators after filteredlist is interacted with

app/javascript/controllers/filteredlist_controller.js

@@ -15,10 +15,22 @@ export default class extends Controller {
     this.filter = debounce(this.filter_nodebounce.bind(this), 300);
   }
 
+  expand() {
+    this.listTarget.classList.remove("hidden");
+    this.inputTarget.classList.remove("rounded-b-md");
+    this.filter_nodebounce();
+  }
+
+  contract() {
+    this.listTarget.classList.add("hidden");
+    this.inputTarget.classList.add("rounded-b-md");
+    this.filter_nodebounce();
+  }
+
   filter_nodebounce() {
     const query = this.inputTarget.value.toLowerCase();
 
-    if (query) {
+    if (query || !this.listTarget.classList.contains("hidden")) {
       this.clearTarget.classList.remove("hidden");
     } else {
       this.clearTarget.classList.add("hidden");
@@ -37,6 +49,6 @@ export default class extends Controller {
   clear_filter() {
     this.inputTarget.value = '';
     this.filter_nodebounce();
-    this.inputTarget.focus();
+    this.contract();
   }
 }

app/views/assignments/_filteredlist.html.erb

@@ -3,10 +3,10 @@
     <input
       type="text"
       data-filteredlist-target="input"
-      data-action="input->filteredlist#filter"
+      data-action="input->filteredlist#filter focus->filteredlist#expand"
       autocomplete="off"
-      class="w-full bg-white/60 border border-gray-300 rounded-t-md shadow-sm text-sm p-1 pr-8 focus:ring-indigo-500 focus:border-indigo-500"
-      placeholder="Filter..."
+      class="w-full bg-white/60 border border-gray-300 rounded-t-md rounded-b-md shadow-sm text-sm p-1 pr-8 focus:ring-indigo-500 focus:border-indigo-500"
+      placeholder="Assign translator (type to filter)"
     />
     <button
       data-action="click->filteredlist#clear_filter"
@@ -14,7 +14,7 @@
       data-filteredlist-target="clear"
       class="absolute hidden inset-y-0 right-0 px-2 text-gray-500"> &times; </button>
   </div>
-  <ul data-filteredlist-target="list" class="max-h-32 overflow-scroll flex flex-row flex-wrap gap-1 my-1 mt-0 flex-shrink-0 bg-black/10 rounded-b-md p-2">
+  <ul data-filteredlist-target="list" class="hidden max-h-32 overflow-scroll flex flex-row flex-wrap gap-1 my-1 mt-0 flex-shrink-0 bg-black/10 rounded-b-md p-2">
     <% users.each do |user| %>
       <%= render partial: 'assignments/filteredlist_option', locals: { session: session, user: user } %>
     <% end %>

app/views/assignments/_user_add.html.erb

@@ -4,7 +4,7 @@
 <span class="inline-flex items-center gap-x-0.5 rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10" style="background-color: <%= user.avatar_color %>" title="<%= user.name %>">
   <span style="color: <%= user.text_color %>"><%= user.name %></span>
   <button type="button" class="group relative -mr-1 size-3.5 rounded-sm hover:bg-gray-500/20">
-    <%= link_to conference_session_assignments_path(session.conference, session, user_id: user.id), data: { turbo_method: :post, turbo_frame: dom_id(session) } do %>
+    <%= link_to conference_session_assignments_path(session.conference, session, user_id: user.id), data: { turbo_method: :post, turbo_frame: dom_id(session), action: "filteredlist#contract" } do %>
       <span class="sr-only">Add</span>
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" stroke-width="1" class="size-3.5 stroke-gray-600/50 group-hover:stroke-gray-600/75 fill-gray-600/50" style="stroke: <%= user.text_color %>; fill: <%= user.text_color %>">
         <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />

app/views/sessions/_session.html.erb

@@ -83,8 +83,8 @@
     </ul>
     <% end %>
     </div>
-    <small class="hidden">unassigned (<%= unassigned_users.length %>)</small>
-    <hr class="hidden">
-    <%# render partial: 'assignments/filteredlist', locals: { session: session, users: unassigned_users } %>
+    <hr>
+    <small>unassigned (<%= unassigned_users.length %>)</small>
+    <%= render partial: 'assignments/filteredlist', locals: { session: session, users: unassigned_users } %>
   </div>
 <% end %>