Shopify 2.0 Dawn - How to hide unavailable variants?

Tried the dawn 15 version myself, and it seems to consistently get stuck in some kind of infinite loop on listings with multiple variation options if I change the top heading.

For instance, if I have Color as the primary heading, and Size as the secondary one, it will correctly work at hiding nonexistent variants on whatever the default color is that the page loads with.

However, if I click to select a new color, it locks up. I tried adding a console message to track what was looping since the observer seemed like the most likely culprit

Apologies for awful whitespace mangling from the message box

// Callback function to execute when mutations are observed
const callback = (mutationList, observer) => {
mutationsChecked=0;
for (const mutation of mutationList) {
if (mutation.type === “childList” && mutation.addedNodes.length > 0) {
console.log(mutationsChecked,mutation)
for (const addedNode of mutation.addedNodes) {
if (addedNode.nodeName == “VARIANT-SELECTS”) {
variantSelects = addedNode;
this.rebuildOptions(addedNode);
}
}
}
mutationsChecked=mutationsChecked+1;
}
};

When it freezes, the console spits out an infinite number of mutationRecords. Once it’s in the infinite loop ‘mutationsChecked’ ends up being the same value each time (31), and the data in the mutationRecord appears to be the same each time, so it appears to be stuck on one record in particular.

EDIT: Commenting out this line

//if a new option has been selected, restart the whole process
//if(change) variantSelects.dispatchEvent(new Event(‘change’, { bubbles: true }));

seems to fix things.

Hopefully this feedback is helpful, I really appreciate you making this script :slightly_smiling_face: