Remove phx-page-loading and phx-capture-click

[shortly-portly]

Hi @josevalim. May I ask why phx-capture-click is being removed? I've used phx-capture-click with a component on a modal to prevent the modal from receiving click events (and in my case submitting a form too early). What, if any, is the alternative to this. thanks.

[josevalim]

There is phx-click-away or something similar.

[shortly-portly]

Thanks for the quick reply but I'm struggling to see how phx-click-away would replace phx-capture-click - so apologies if I'm missing something obvious.

As an example, I have a component which mimics a select dropdown. The below code is a skeleton example:

  def select(assigns) do
    ~H"""
      <div id="item">
        <div>Hello</div>
        <div>Hello</div>
        <div>Hello</div>
      </div>
      <button phx-capture-click={JS.toggle(to: "#item")}> 
        toggle!
      </button>
    """
  end

I can include this "select" component inside a form component that comes with Liveview 0.17.5. If I replace the phx-capture-click with a phx-click then the click event bubbles up and causes the form itself to submit - which isn't what I want. How would phx-click-away replace the functionality provided by phx-capture-click.

cheers

Dave

[josevalim]

Wouldn’t phx-click be enough for this case?

[shortly-portly]

No because phx-click bubbles up to the form component which sees it as a submit and then submits the form. With phx-capture-click the click is captured and shows/hides the select as appropriate.

For another example, standard forms are normally shown in a modal - without the phx-capture-click the modal also receives the click event and closes.

[josevalim]

I see. That’s something for Chris to consider then when going ahead with these deprecations! Thanks for clarifying!

[shortly-portly]

No problem. I've said it before but thanks for an awesome language and framework.

[chrismccord]

<button> by default in an HTML form is type="submit". When you have a button in a form that you don't want to submit it, you need to specify <button type="button". In this case, the capture click was a band-aid around the missing attribute :)

[shortly-portly]

Ah so my example was incorrect. I'll have another go at implementing my dropdown using the JS style of commands. Thanks for the help (and the amazing framework of course).

[shortly-portly]

HI Chris - I reimplemented my dropdown with just JS style commands and it works perfectly.

[josevalim]

I think those have been deprecated but the JavaScript code may still handle them.

[rhcarvalho]

Is this something to consider removing for the 1.0.0 release if it is still in the code base?

[SteffenDE]

@josevalim I created a PR to remove phx-capture-click.

I don't know the details about phx-page-loading. Do you know the details to explain why it should be removed? It's still referenced in the documentation multiple times:

• https://hexdocs.pm/phoenix_live_view/js-interop.html#live-navigation-events
• https://hexdocs.pm/phoenix_live_view/bindings.html#scroll-events-and-infinite-stream-pagination

[josevalim]

@chrismccord has the details. I am pretty sure I opened this on his behalf. :D