Compatibility issue with `data-turbo-frame` and Tailwind Plus Elements Dropdown

[henrikbjorn]

They guys from Tailwind have recently introduces non-js-framework components for Modal, Dropdown etc. They are build as custom elements.

When using the el-dropdown and the menu containing a link with data-turbo-frame="modal" the click on the link is not intercepted and a full navigation is performed.

If that same link is moved out of the el-dropdown element it works. The menu part of the dropdown uses the new popover html attribute. Not sure if that is part of the issue.

[thelmuxkriovar]

the problem is web components, turbo does not work with <a>s in any web component

[woto]

So... DHH was wrong? https://x.com/dhh/status/1952359560619995516 Should we highlight the problem to him ;)

[thelmuxkriovar]

perhaps there's going to be an update in hotwire? not sure, would be interesting to get his opinion @dhh

[dhh]

Maybe @adamwathan has someone from his team that can take a look at what's possible with compatibility.

[henrikbjorn]

@adamwathan Sorry to bother you, but something you might be able to help with or your team? :)

[thecrypticace]

Hi! I'm from the Tailwind Team. I'm personally not super familiar with Turbo and how things work but I just set up a test project in Rails and it seems to work from what I can tell.

@henrikbjorn Any chance you could provide a repo I could clone and look at?

This code that I tested seems to work for me:

<!-- index.html.erb -->
<script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script>

<el-dropdown class="block p-4">
  <button type="button" class="rounded bg-gray-100 px-4 py-2 hover:bg-gray-200">Options</button>
  <el-menu popover class="m-4 flex-col divide-y divide-black/5 rounded border border-black/15 bg-white bg-clip-padding shadow open:flex">
    <a class="px-4 py-2 hover:bg-purple-500 hover:text-white" href="/show" data-turbo-frame="content_frame">Show In Frame</a>
    <a class="px-4 py-2 hover:bg-purple-500 hover:text-white" href="/show">Navigate To Page</a>
  </el-menu>
</el-dropdown>

<turbo-frame id="content_frame" class="block bg-gray-100 p-4">
  initial frame content
</turbo-frame>

<!-- show.html.erb -->
<turbo-frame id="content_frame">
  <div class="fixed inset-0 bg-black/15 backdrop-blur flex justify-center items-center">
    <div class="w-fit h-fit bg-white p-4 rounded shadow">
      <p>Current time: <%= Time.current.strftime("%H:%M:%S.%L") %></p>
      <p>Loaded via Turbo Frame.</p>
      <a href="/show" data-turbo-frame="content_frame">Reload Frame</a>
    </div>
  </div>
</turbo-frame>

[henrikbjorn]

Hi! I'm from the Tailwind Team. I'm personally not super familiar with Turbo and how things work but I just set up a test project in Rails and it seems to work from what I can tell.

@henrikbjorn Any chance you could provide a repo I could clone and look at?

This code that I tested seems to work for me:

<script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> Options Show In Frame Navigate To Page initial frame content

Current time: <%= Time.current.strftime("%H:%M:%S.%L") %>

Loaded via Turbo Frame.

Reload Frame

I did an update from the initial release to the current one, and it is working now. Not sure what to say, sorry