Extending will cause infinite loop if adding a wrapper node (3.13.4) #3994

gundam78 · 2024-01-24T07:54:09Z

gundam78
Jan 24, 2024

This bug only appears in new version 3.13.4 ( 3.13.3 will not)

I write a custom directive to wrapping a node with a

( function to add tooltip or something). It will cause infinite loop, maybe because the original node (with the directive) moving trigger the directive to evaluate again and again?

This demo code using tailwind & daisyui (or see: https://jsfiddle.net/gundam78/be9hrs0L/62/)

document.addEventListener('alpine:init', () => {
  Alpine.directive('test', el => {
    console.log('testing');
    let wrapper = document.createElement('div');
    wrapper.setAttribute('class', 'bg-blue-300 p-8');
    el.parentNode.replaceChild(wrapper, el);
    wrapper.appendChild(el);
  });
});

<head>
  <link href="https://cdn.jsdelivr.net/npm/daisyui@4.6.0/dist/full.min.css" rel="stylesheet" type="text/css" />
  <script src="https://cdn.tailwindcss.com"></script>
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.4/dist/cdn.min.js"></script>
</head>


<div x-data>
  <div class="bg-red-300 w-32 h-32" x-test>
  </div>
</div>