Can i implement focus trapping for text input field using stimulus without a controller?

166 views Asked by At

I am trying to implement focus trapping in a search bar using text input field in my ruby on rails app. I can implement focus trapping using using a controller for my search form, but it seems like adding an extra controller just for this task. I'm trying to find if there are any easier or effective way to implement this.

I have tried using the search input field, but the problem arises with the clear button. For removing the clear button I would need to write additional CSS, as I couldn't find any builtin class for removing this button with tailwind. I can write raw js for focus trapping, but I'm searching for any stimulus or tailwind specific solution without involving me to write additional tailwind custom classes or stimulus controller.

<div>
  <%= form.label :search, "Search Users Field", class: "sr-only" %>
  <div class="relative w-full">
    <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
        <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
    </div>
    <%= form.search_field :search,"data-turbo-frame": :user_list, 
      class: "bg-gray-light text-black text-sm rounded-3xl focus:ring-gray focus:border-gray block w-full pl-10 p-2.5 ", 
      placeholder: "Search for Name, Designation, Division, or Zone"
    %>
  </div>
</div>
0

There are 0 answers