`outerHTML` morph not working with a purely text-based update

renardeinside commented 5 months ago

I've hit quite a strange behavior of Idiomorph.morph, namely:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <script src="https://unpkg.com/idiomorph@0.3.0"></script>
</head>
<body>
<div id="schorle-page">
  <div id="sle-000">
    <button id="me">Click me</button>
  </div>
</div>
<script>
  btn = document.getElementById('me');
  newPayload = `
    <div id="sle-000">
      <button id="me">${Math.random()}</button>
    </div>`;
  console.log(`Script loaded`);
  btn.addEventListener('click', function() {
    const node = document.getElementById('sle-000');
    console.log('Node to be morphed', node);
    console.log('New payload', newPayload);
    Idiomorph.morph(node, newPayload, {ignoreActiveValue: true, morphStyle: 'outerHTML'});
    console.log('Node after morph', node);
  });

</script>
</body>
</html>

I would expect the text of the button to be updated, but nothing happens. Am I missing something?

renardeinside commented 5 months ago

Example on stackblitz - https://stackblitz.com/edit/stackblitz-starters-ved28x?file=index.html

pbowyer commented 1 month ago

When I run your example on Stackblitz in Chrome it morphs as expected. Is it now working for you?

bigskysoftware / idiomorph

`outerHTML` morph not working with a purely text-based update #56