destroy() not called on components nested inside x-if #3980

teak · 2024-01-13T04:48:08Z

teak
Jan 13, 2024

Components that are nested inside a second level x-if are not properly destroyed when the parent is removed from the DOM.

<div x-data="{open: true}">
  <button @click="open = !open">Toggle</button>

  <template x-if="open">
    <div x-data="content('hello')">
      <!-- destroy correctly called for this component -->
      <div x-text="message"></div>
      
      <template x-if="true">
        <div x-data="content('world')" x-text="message">
          <!-- destroy will not be called when this is removed from DOM -->
        </div>
      </template>
      
    </div>
  </template>
  
</div>

Alpine.data('content', (message) => ({
  message: message,
  destroy() {
    console.log('destroy ' + this.message);
  }
}));

Demo jsFiddle

ekwoka · 2024-01-13T20:06:39Z

ekwoka
Jan 13, 2024

I have some in progress work resolving this for x-if and x-for where the trees are improperly destroyed.

2 replies

docdunning Feb 3, 2024

@ekwoka

I have some in progress work resolving this for x-if and x-for where the trees are improperly destroyed.

I've experienced what could well be the same problem - here's some code that illustrates the issue, if it helps. I get a console error after a couple of toggles, complaining that the item variable does not have a title property.

Fwiw, my workaround is to use a separate loading variable for the inner x-if, but it would be neater to be able to use item directly.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
</head>
<body>
  <div id="page-container" x-data="item">
    <ol>
      <li>Click Toggle template</li>
      <li>Click Get item</li>
      <li>Click Toggle template</li>
      <li>Click Get item</li>
      <li>Console error</li>
    </ol>
    <button @click="showtemp = !showtemp">Toggle template</button>
    <button @click="showitem">Get item</button>
    <template x-if="showtemp">
      <div>
        <p>Template</p>
        <template x-if="item">
          <p x-text="item.title"></p>
        </template>
      </div>
    </template>
  </div>
<script>
document.addEventListener('alpine:init', () => {
  Alpine.data('item', () => ({
    item: null,
    showtemp: false,
    showitem() {
      this.item = null
      fetch('https://jsonplaceholder.typicode.com/todos/1')
        .then(response => response.json())
        .then(json => this.item = json)
    },
  }))
})
</script>
</body>
</html>

ekwoka Feb 4, 2024

Thanks. It is an issue with the inner effect scheduling, where the item.text is scheduled before the things that will clean up the x-effects cloned elements.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

destroy() not called on components nested inside x-if #3980

{{title}}

Replies: 1 comment 2 replies

{{title}}

{{title}}

{{title}}

Select a reply

destroy() not called on components nested inside x-if #3980

teak Jan 13, 2024

Replies: 1 comment · 2 replies

ekwoka Jan 13, 2024

docdunning Feb 3, 2024

ekwoka Feb 4, 2024

teak
Jan 13, 2024

Replies: 1 comment 2 replies

ekwoka
Jan 13, 2024