Made a wrong turn somewhere - and now Stimulus events are not listening :(

rubyonrails-talk
1

I’m pretty sure it’s on me - but here goes:

Got this app/components/select/select_component* showing a <select /> in my forms - all is good so far.

I’m using a TailwindUI layout - meaning that I have an <input /> and a <div /> with a bunch of <div/> making up the options box.

I grab the keyup event - and the input focus event - toggling the show/hide of the options box. Easy-peasy.

Then I’d like to afford users to “tapping” on the options - should they somehow end up on my view holding a mobile device in hand…my chances are 60/40, allegedly :slight_smile:

My first idea was to add data-action="click->select--select-component#tap" to every “option” (div) like this

  <div class="hidden origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50"
       data-select--select-component-target="menu">
    <div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
      <% @items.each do |item| %>
        <div data-select--select-component-target="item"
             data-action="click->select--select-component#tap"
             class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 <%= item.selected ? 'font-semibold' : '' %>" >
          <%= item.title %>
        </div>
      <% end %>
    </div>

- nothing - - nothing but silence

If I remove the ‘hidden’ class on the surrounding div - the tap method starts spitting console.log texts to my hearts delight :smiley:

But why the events are not available if the component gets born into the “cold dark abyss that is ‘hidden’” and then get ‘toggled’ is not clear to me :frowning:

I’d sure appreciate if someone with a lot more stimulus-fu could point me in the right direction.

2

Turbo to the rescue :smiley:

I’m a very happy subscriber to gorails.com - and Chris has an episode dealing with Custom Select fields which made me redo my Select Box letting Turbo Streams fill the option divs once the input gets focus - and voíla :smiley:

thx Chris!