Form component does not trigger phx-change when navigated to from live_redirect

[ziazek]

I'm using a form component with context, following the Getting Started docs.

<!-- ... -->
<Form for={{ @changeset }} change="validate" autocomplete="on">
  <div class="columns is-multiline">
    <Field field="surname" required>
      <TextInput />
    </Field>
    <Field field="given_name" required>
      <TextInput/>
    </Field>
    <Field field="email" required>
      <TextInput placeholder="example@gmail.com"/>
    </Field>
  </div>
</Form>
<!-- ... -->

Validations work when I arrive at the page via live_link. However, using live_redirect causes two weird behaviours:

1. Navigating from /home to /form via live_redirect: The form "validate" event fires, but navigating back using the browser doesn't work (I'm still on /form).
2. Full page refresh on /form, navigating back to /home, then clicking on live_redirect to /form again: The form "validate" event no longer fires.

I suspected that it was due to the LV Component limitations, but I'm not sure. Is it the case?

Thanks.

[ziazek]

Update:
I tried a "regular" form:

{{ f = form_for @changeset, "#", [phx_change: :validate, phx_submit: :save] }}
  {{ label f, :surname }}
  {{ text_input f, :surname }}
  {{ error_tag f, :surname }}

  {{ label f, :given_name }}
  {{ text_input f, :given_name }}
  {{ error_tag f, :given_name }}

  {{ label f, :email }}
  {{ text_input f, :email }}
  {{ error_tag f, :email }}

  {{ submit "Save" }}
<#Raw></form></#Raw>

(1) remains - clicking the browser Back button doesn't work. It's probably an issue with LV and not Surface.

I see the following in the console (LiveView debugger), which seems to indicate the new content was pushed to the browser, but the DOM was not replaced.

For (2),

• Using the "regular" form, after navigating using the browser Back button to /home then back to /form again, the "validate" event does fire.
• I found a workaround that works with the Surface component - use push_redirect(socket, to: "/home") to navigate back instead of using the browser Back button.

However, this won't prevent users from using the Back button.

[ziazek]

Update: I managed to fix it.

It was due to a layout declaration in my LiveView. Once I removed it, the bugs went away.

defmodule AppWeb.StepperLive do
  use Surface.LiveView, layout: {AppWeb.LayoutView, "live.html"} 
  # Don't put layout here, do it in router
  # ...
end

Closing this issue.

[msaraiva]

@ziazek I'm glad to know you've fixed.

Cheers.