Phx-click messes up the events for native html element

Questions / Help
, ,
1

When I add an event to my Collapsible (this is a simplified version) it will not toggle the details / summary. I think it has something to do with liveview hijacking the event, but is there something im missing?

      <details>
        <summary>
          <div phx-click="toggle_event" >
            <span>
              This does not work due to the phx-click
            </span>
          </div>
        </summary>
        The hidden content
      </details>

      <details>
        <summary>
          <div>
            <span>
              This one works as expected without the phx-click event
            </span>
          </div>
        </summary>
        The hidden content
      </details>
2

I should add that it works fine when adding an onclick in plain html

3

The solution i came up with was a pure css/tailwind solution.
My goal was to change the text in the summery based on if it was open or closed. Here is the simplified implementation and its not liveview specific:

<details class="group select-none">
  <summary class="list-none">
    <p class="peer flex group-open:hidden" class="">Open</p> 
    <p class="hidden group-open:flex">Close</p>
  </summary>
  My Hidden Content
</details>

Still belive that it’s a bug in liveview that didn’t allow me to do it via a phx-click to toggle a variable.