use :has selectors for search input

app/javascript/elements/search_input.js

@@ -1,18 +1,5 @@
 export default class extends HTMLElement {
   connectedCallback () {
-    this.input.addEventListener('focus', () => {
-      if (this.title) {
-        this.titleContainer.classList.add('max-md:hidden')
-      }
-    })
-
-    this.input.addEventListener('blur', (e) => {
-      if (this.title && !e.target.value) {
-        this.title.classList.remove('hidden')
-        this.titleContainer.classList.remove('max-md:hidden')
-      }
-    })
-
     this.button.addEventListener('click', (event) => {
       if (!this.input.value && document.activeElement !== this.input) {
         event.preventDefault()
@@ -30,30 +17,12 @@ export default class extends HTMLElement {
 
   onBeforeCache = () => {
     this.input.value = this.input.getAttribute('value') || ''
-
-    if (this.title) {
-      this.titleContainer.classList.remove('max-md:hidden')
-    }
   }
 
   get input () {
     return this.querySelector('input')
   }
 
-  get title () {
-    return document.querySelector(this.dataset.title)
-  }
-
-  get titleContainer () {
-    const parent = this.title.parentElement
-
-    if (parent && !parent.contains(this)) {
-      return parent
-    }
-
-    return this.title
-  }
-
   get button () {
     return this.querySelector('button')
   }

app/views/shared/_search_input.html.erb

@@ -14,7 +14,7 @@
       </a>
     </div>
   <% end %>
-  <search-input data-title="<%= local_assigns[:title_selector] || 'h1' %>" class="group flex items-center max-md:focus-within:flex-1 <%= 'max-md:flex-1' if params[:q].present? %>">
+  <search-input class="group flex items-center max-md:focus-within:flex-1 <%= 'max-md:flex-1' if params[:q].present? %>">
     <input id="search" name="q" value="<%= params[:q] %>" enterkeyhint="search" class="input text-lg pr-10 -mr-12 w-0 md:w-60 max-md:group-focus-within:w-full <%= 'pl-8 input-outlined max-md:w-full' if params[:q].present? %>" placeholder="<%= local_assigns[:placeholder] %>">
     <button type="submit" title="<%= t('search') %>" class="btn btn-ghost btn-circle">
       <span class="enabled">

app/views/submissions_archived/index.html.erb

@@ -6,11 +6,11 @@
   <% end %>
 </div>
 <div class="flex flex-col md:flex-row md:items-center mb-4 gap-3">
-  <div class="flex w-full justify-between items-center">
+  <div class="group/header flex w-full justify-between items-center">
-    <div>
+    <div class="max-md:group-has-[search-input:focus-within]/header:hidden">
       <h1 class="text-2xl md:text-3xl font-bold md:block <%= 'hidden' if params[:q].present? %>"><%= t('submissions') %> <span class="badge badge-outline badge-lg align-middle"><%= t('archived') %></span></h1>
     </div>
-    <div class="max-md:focus-within:grow <%= 'max-md:grow' if params[:q].present? %>">
+    <div class="max-md:has-[search-input:focus-within]:grow <%= 'max-md:grow' if params[:q].present? %>">
       <% if params[:q].present? || @pagy.pages > 1 || filter_params.present? %>
         <%= render 'shared/search_input', placeholder: "#{t('search')}..." %>
       <% end %>

app/views/submissions_dashboard/index.html.erb

@@ -1,8 +1,8 @@
 <% filter_params = params.permit(Submissions::Filter::ALLOWED_PARAMS).compact_blank %>
 <% is_show_tabs = (@pagy.count.nil? || @pagy.count >= 5) || params[:status].present? || filter_params.present? %>
 <% if Docuseal.demo? %><%= render 'shared/demo_alert' %><% end %>
-<div class="flex justify-between items-center w-full mb-4">
+<div class="group/header flex justify-between items-center w-full mb-4">
-  <div class="flex items-center flex-grow min-w-0 <%= 'max-md:hidden' if params[:q].present? %>">
+  <div class="flex items-center flex-grow min-w-0 max-md:group-has-[search-input:focus-within]/header:hidden <%= 'max-md:hidden' if params[:q].present? %>">
     <div class="mr-2">
       <%= render 'dashboard/toggle_view', selected: 'submissions' %>
     </div>
@@ -10,7 +10,7 @@
       <%= t('submissions') %>
     </h1>
   </div>
-  <div class="flex space-x-2 max-md:focus-within:grow <%= 'max-md:grow' if params[:q].present? %>">
+  <div class="flex space-x-2 max-md:has-[search-input:focus-within]:grow <%= 'max-md:grow' if params[:q].present? %>">
     <% if params[:q].present? || @pagy.pages > 1 || filter_params.present? %>
       <%= render 'shared/search_input' %>
     <% end %>

app/views/template_folders/show.html.erb

@@ -5,7 +5,7 @@
   <% end %>
 </div>
 <dashboard-dropzone>
-  <div class="relative flex justify-between items-center w-full mb-4">
+  <div class="group/header relative flex justify-between items-center w-full mb-4">
     <%= form_for '', url: '', id: form_id = SecureRandom.uuid, method: :post, class: 'hidden', data: { target: 'dashboard-dropzone.form' }, html: { enctype: 'multipart/form-data' } do %>
       <input name="form_id" value="<%= form_id %>">
       <input name="folder_name" value="<%= @template_folder.full_name %>">
@@ -16,7 +16,7 @@
     <% unless @template_folder.parent_folder %>
       <%= render 'templates/dashboard_folder_dropzone', style: 'height: 137px' %>
     <% end %>
-    <h1 class="text-2xl truncate md:text-3xl font-bold flex items-center flex-grow min-w-0 space-x-2 md:flex <%= 'hidden' if params[:q].present? %>">
+    <h1 class="text-2xl truncate md:text-3xl font-bold flex items-center flex-grow min-w-0 space-x-2 md:flex max-md:group-has-[search-input:focus-within]/header:hidden <%= 'hidden' if params[:q].present? %>">
       <%= svg_icon('folder', class: 'w-9 h-9 flex-shrink-0') %>
       <span class="peer truncate">
         <%= @template_folder.name %>
@@ -29,7 +29,7 @@
         </span>
       <% end %>
     </h1>
-    <div class="flex space-x-2 max-md:focus-within:grow <%= 'max-md:grow' if params[:q].present? %>">
+    <div class="flex space-x-2 max-md:has-[search-input:focus-within]:grow <%= 'max-md:grow' if params[:q].present? %>">
       <% if params[:q].present? || @pagy.count.nil? || @pagy.count > 0 || @template_folders.present? %>
         <%= render 'shared/search_input' %>
       <% end %>

app/views/templates/show.html.erb

@@ -3,15 +3,15 @@
 <% is_show_tabs = @pagy.pages > 1 || params[:q].present? || params[:status].present? || filter_params.present? %>
 <% if @pagy.count.nil? || !@pagy.count.zero? || params[:q].present? || params[:status].present? || filter_params.present? %>
   <div class="<%= is_show_tabs ? 'mb-4' : 'mb-6' %>">
-    <div class="flex justify-between items-center md:items-end">
+    <div class="group/header flex justify-between items-center md:items-end">
-      <div>
+      <div class="max-md:group-has-[search-input:focus-within]/header:hidden">
         <h2 class="text-3xl font-bold md:block <%= 'hidden' if params[:q].present? %>">
           <%= t('submissions') %>
         </h2>
       </div>
-      <div class="flex justify-end space-x-2 max-md:focus-within:grow <%= 'max-md:grow' if params[:q].present? %>">
+      <div class="flex justify-end space-x-2 max-md:has-[search-input:focus-within]:grow <%= 'max-md:grow' if params[:q].present? %>">
         <% if params[:q].present? || params[:status].present? || filter_params.present? || @pagy.pages > 1 %>
-          <%= render 'shared/search_input', title_selector: 'h2' %>
+          <%= render 'shared/search_input' %>
         <% end %>
         <%= link_to new_template_submissions_export_path(@template, params.permit(:q, *Submissions::Filter::ALLOWED_PARAMS)), class: 'hidden md:flex btn btn-ghost text-base', data: { turbo_frame: 'modal' } do %>
           <%= svg_icon('download', class: 'w-6 h-6 stroke-2') %>

app/views/templates_archived/index.html.erb

@@ -4,8 +4,8 @@
     <span style="margin-left: 3px"><%= t('back_to_active') %></span>
   <% end %>
 </div>
-<div class="flex justify-between mb-4 items-center">
+<div class="group/header flex justify-between mb-4 items-center">
-  <div>
+  <div class="max-md:group-has-[search-input:focus-within]/header:hidden">
     <h1 class="text-2xl md:text-3xl font-bold md:block <%= 'hidden' if params[:q].present? %>"><%= t('document_templates_html') %> <span class="badge badge-outline badge-lg align-middle"><%= t('archived') %></span></h1>
   </div>
   <% if params[:q].present? || @pagy.pages > 1 %>

app/views/templates_archived_submissions/index.html.erb

@@ -8,13 +8,13 @@
   <% end %>
 </div>
 <div class="flex flex-col md:flex-row md:items-center mb-4 gap-3">
-  <div class="flex w-full md:flex-1 min-w-0 justify-between items-center">
+  <div class="group/header flex w-full md:flex-1 min-w-0 justify-between items-center">
-    <div>
+    <div class="max-md:group-has-[search-input:focus-within]/header:hidden">
       <h2 class="text-2xl md:text-3xl font-bold md:block"><%= t('submissions') %> <span class="badge badge-outline badge-lg align-middle"><%= t('archived') %></span></h2>
     </div>
-    <div class="max-md:focus-within:grow <%= 'max-md:grow' if params[:q].present? %>">
+    <div class="max-md:has-[search-input:focus-within]:grow <%= 'max-md:grow' if params[:q].present? %>">
       <% if with_filters %>
-        <%= render 'shared/search_input', title_selector: 'h2' %>
+        <%= render 'shared/search_input' %>
       <% end %>
     </div>
   </div>

app/views/templates_dashboard/index.html.erb

@@ -7,12 +7,12 @@
     <button type="submit"></button>
     <input id="dashboard_dropzone_input" name="files[]" type="file" multiple>
   <% end %>
-  <div class="flex justify-between items-center w-full mb-4 relative">
+  <div class="group/header flex justify-between items-center w-full mb-4 relative">
     <% unless show_dropzone %>
       <%= render 'templates/dashboard_dropzone', style: 'height: 114px' %>
     <% end %>
     <%= render 'templates/dashboard_folder_dropzone', style: 'height: 114px' %>
-    <div class="flex items-center flex-grow min-w-0 <%= 'max-md:hidden' if params[:q].present? %>">
+    <div class="flex items-center flex-grow min-w-0 max-md:group-has-[search-input:focus-within]/header:hidden <%= 'max-md:hidden' if params[:q].present? %>">
       <% if has_archived || @pagy.count.nil? || @pagy.count > 0 || @template_folders.present? %>
         <div class="mr-2">
           <%= render 'dashboard/toggle_view', selected: 'templates' %>
@@ -22,7 +22,7 @@
         <%= t('document_templates_html') %>
       </h1>
     </div>
-    <div class="flex space-x-2 max-md:focus-within:grow <%= 'max-md:grow' if params[:q].present? %>">
+    <div class="flex space-x-2 max-md:has-[search-input:focus-within]:grow <%= 'max-md:grow' if params[:q].present? %>">
       <% if params[:q].present? || @pagy.count.nil? || @pagy.count > 1 || @template_folders.present? %>
         <%= render 'shared/search_input' %>
       <% end %>

app/views/templates_shared/index.html.erb

@@ -4,15 +4,15 @@
     <span style="margin-left: 3px"><%= @is_archived ? t('back_to_active') : t('home') %></span>
   <% end %>
 </div>
-<div class="relative flex justify-between items-center w-full mb-4">
+<div class="group/header relative flex justify-between items-center w-full mb-4">
-  <h1 class="text-2xl truncate md:text-3xl font-bold flex items-center flex-grow min-w-0 space-x-2 md:flex <%= 'hidden' if params[:q].present? %>">
+  <h1 class="text-2xl truncate md:text-3xl font-bold flex items-center flex-grow min-w-0 space-x-2 md:flex max-md:group-has-[search-input:focus-within]/header:hidden <%= 'hidden' if params[:q].present? %>">
     <%= svg_icon('folder', class: 'w-9 h-9 flex-shrink-0') %>
     <span class="truncate capitalize"><%= t('shared') %></span>
     <% if @is_archived %>
       <span class="badge badge-outline badge-lg align-middle"><%= t('archived') %></span>
     <% end %>
   </h1>
-  <div class="flex space-x-2 max-md:focus-within:grow <%= 'max-md:grow' if params[:q].present? %>">
+  <div class="flex space-x-2 max-md:has-[search-input:focus-within]:grow <%= 'max-md:grow' if params[:q].present? %>">
     <% if params[:q].present? || @pagy.count.nil? || @pagy.count > 1 %>
       <%= render 'shared/search_input' %>
     <% end %>