Just wanted to share a possible bug on card-back-section’s iframe rendering (and possibly other iframes beside card-back-section as well.
We were adding buttons inside the <form></form> tags on the card-back-section of the power-up being developed. On the first initial render when the card is opened, the rendering works properly (our .js script successfully update the html values as intended). However, after the first user click action of any of these buttons, the rendering fails without any error message logged on the console. After the second click and so on, the .js works properly.
This could mess up with functions that depend on user input because at this moment, the input values would be null (or as set in the html). Note that any stored data through t.set() is not affected by this issue, unless there is any new t.set() runs called using values from the nulled (default) elements at the time.
After hours of isolating the problem, we found out that removing the <form></form> tags would resolve this issue. Below is a simplified reproduction of the issue:
Error causing HTML:
<section class="back-section-group" id="testing-section">
<form> <!--Removing this fixes the problem-->
<input type="button" id="test-val"
value="Failed to Render" class="mod-danger">
<button id="trigger-button">Trigger Value Change from Null to 1 or 1 to Null</button>
</form> <!--Removing this fixes the problem-->
</section>
.js:
t.render(function() {
return t.get('card', 'shared', 'testVal', null)
.then(function(testVal) {
completionDateElement = document.getElementById('test-val');
if (testVal == null) {
// If value is null, should be no color
completionDateElement.value = "Value is null";
completionDateElement.className = "";
} else {
// If value is not null, should be green
completionDateElement.value = "Value is successfully set";
completionDateElement.className = "mod-primary";
}
// Otherwise, if failed to render, should be red (as set in the html)
});
});
document.getElementById('trigger-button').onclick = function(event) {
return t.get('card', 'shared', 'testVal', null)
.then(function(testVal) {
// Toggle between 0 and 1
if (testVal == null)
testVal = 1;
else
testVal = null;
// Set the toggled value back through t.set
return t.set('card', 'shared', 'testVal', testVal)
.then(function() {
});
});
}