bigskysoftware
`outerHTML` morph not working with a purely text-based update
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/[email protected]"></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?
Example on stackblitz - https://stackblitz.com/edit/stackblitz-starters-ved28x?file=index.html
When I run your example on Stackblitz in Chrome it morphs as expected. Is it now working for you?
Hi had a quick debug of this issue and found that the cause of your wierd behaviour is you have set the ignoreActiveValue to true which will skip updating the value and text contents of the active focused element on the page which in your case mean the button you added to click on will actually be that active element when you click on it so it will try and morph everything except the value of this button.
