Destroyed: the child has been removed from the parent

Phoenix Forum Questions / Help
1

Hello there!

Im having a strange behavior, where I have a live view page, and a button that opens a modal. The modal contains a live_component.

When the modal is closed, mount on the liveview page is being called again, and in the console Im seeing the following:

phx-F1eqgq3XsI1TtBwB update:  -  {2: {…}, c: {…}}
palette.js:744 phx-F1eqgq3XsI1TtBwB destroyed: the child has been removed from the parent -  undefined
palette.js:744 phx-F1eqgq3XsI1TtBwB destroyed: the child has been removed from the parent -  undefined
palette.js:744 phx-F1eqgq3XsI1TtBwB mount:  -  {0: 1, 1: {…}, 2: {…}, c: {…}, s: Array(4), t: 'Teams'}

So Im not sure why the liveview page is being destroyed when the modal is closed.

Im using Phoenix 1.7.2 and liveview 0.18.18

Im not even sure how can I even debug this. I’ve tried using liveSocket.enableDebug(); but Im not getting any more information.

Any thoughts? Any way to debug this? :pray:

Thanks a lot!

2

Does your modal generate a new path?

If your path is “foo” and when you open the modal it becomes “foo/bar”, then closing the modal will take you back to “foo” which is a redirect. Even if pages share the same mount, you will still get destroyed and mount when switching between paths.

I don’t know the technical side, just my observations. Anytime I navigate/redirect rather than just patch the same page I get the destroyed-mount messages in the console.

3

Im doing a patch, not a redirect there. This is the html for the “button”

<a href="/teams/new" data-phx-link="patch" data-phx-link-state="push" class="xxxxx" x-tooltip.light="'Add Team'">
  <i class="fa-solid fa-circle-plus fa-xl"></i>
</a>

And as you can see here, the result is that the list of teams that exists in the liveview page, disappear.

teams2

And I just created a new Phoenix project, generated a live view page with the same code, and the result is the expected one. The mount is not called twice and the liveview is not being destroyed.

The code is the same, the “add button” html code is

<a href="/users/new" data-phx-link="patch" data-phx-link-state="push">
      <button class="xxxxxx">
         New User
      </button>
</a>

And the live view is not being destroyed

phx-F1e6eyvv_oe22gBC mount:  -  {0: ' src="/images/logo.svg"', 1: '1.7.2', 2: {…}, 3: {…}, s: Array(5), t: 'Listing Users'}
utils.js:28 phx-F1e6eyvv_oe22gBC update:  -  {3: {…}, c: {…}, t: 'New User'}
utils.js:28 phx-F1e6eyvv_oe22gBC update:  -  {3: {…}, t: 'Listing Users'}
utils.js:28 phx-F1e6eyvv_oe22gBC update:  -  {3: {…}, c: {…}, t: 'New User'}
utils.js:28 phx-F1e6eyvv_oe22gBC update:  -  {3: {…}, t: 'Listing Users'}
utils.js:28 phx-F1e6eyvv_oe22gBC update:  -  {3: {…}, c: {…}, t: 'New User'}
utils.js:28 phx-F1e6eyvv_oe22gBC update:  -  {3: {…}, t: 'Listing Users'}

users

Im trying to see if I missed something when I migrate to 1.7, because code wise both pages use the same components/code.