Hi y’all! Having some issues from with the “Initial State” attribute when doing CMS Combine, is there anyone that would mind helping out?
Hey @Jorge1! Could you explain a little more about what issue you
are having? I’m not quite sure I understand the issue.
Hey @Support-Luis! So on this page:
I have CMS Combine combined with CMS Filter & Load.
I have a “initial state” attribute for the main filtering component (see image) but the “initial state” isn’t working.
@Support-Luis also while I have you, I wanted to ask if it’s possible to load the CMS Custom Select filter with the page ? Right now the Webinars dropdown and Blog Categories dropdown (both are Custom Select elements) don’t work unless all CMS items are fully loaded.
Hey @jorge1! The initial state fails because there is a typo in the attribute value.
You’ve set it up as fs-cmsfilter-element = initial-state when it should be fs-cmsfilter-element = initial.
For the Custom Select we can reload the Attribute using the CMS Load callback to ensure all items are fully loaded. This snippet should do the trick
<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
'cmsload',
(listInstances) => {
console.log('cmsload Successfully loaded!');
window.fsAttributes.selectcustom.init();
},
]);
</script>
1 Like
Hi @Support-Luis! Thanks for you help on this! Initial state works now, sorry for that 
but I added that code in the <body> and it still doesn’t load on time.
Also ONE more question, is there a way to have an “active” state as well? I want the list and a few more divs hidden until filters are active
Hey @Jorge1! What do you mean by it doesn’t load on time? Are the items not completely populated or is the filtering not working together? Depending on this there are some things we can try.
I’m afraid hiding more elements than just the list for the initial state is not native to the solution as we hide the collection wrapper, but we can add some code to hide other divs if this wrapper is hidden, let me know if you need any help with this code or if you can take on it 
Hi! So the filtering works - but the Custom Form Select options don’t load for a couple minutes.
CMS Select options do load however - so the Select Options are there, they just take a very long time to load into the custom form select element (like ~5min minutes).
Regarding the code, so would just be:
“If #X element is display:inline, then set #Y element to display:none”
Or “If #X element is display:nonce, then set #Y element to display:inline”
In either case if you have a minute and can provide the code, that’d be greatly appreciated! Otherwise just confirming if either “logic” above would work is ok and I can try handling it - thanks again for your help thus far!! 
I don’t see anything that could slow down Custom Form Select from loading the options 
Adding the callback below shows the script running as expected.
<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
'selectcustom',
(listInstances) => {
console.log('selectcustom Successfully loaded!');
},
]);
</script>
Regarding the code, yes we can use a MutationObserver to detect style changes on one element and modify another element’s style. Here is a ChatGPT Example
<script>
// Function to handle changes in the DOM
function handleMutation(mutationsList) {
mutationsList.forEach((mutation) => {
// Check if the style attribute of element A changes
if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
// Check if element A is hidden
const elementA = document.getElementById('elementA');
if (elementA.style.display === 'none') {
// Hide element B
document.getElementById('elementB').classList.add('hidden');
} else {
// Show element B
document.getElementById('elementB').classList.remove('hidden');
}
}
});
}
// Target element A
const targetNode = document.getElementById('elementA');
// Create a new instance of Mutation Observer with a callback function
const observer = new MutationObserver(handleMutation);
// Configure the observer to watch for changes in the style attribute of element A
const config = { attributes: true };
// Start observing the target element
observer.observe(targetNode, config);
// Example: Toggle the visibility of element A (for demonstration purposes)
setInterval(() => {
const elementA = document.getElementById('elementA');
elementA.style.display = elementA.style.display === 'none' ? '' : 'none';
}, 2000); // Toggle every 2 seconds for demonstration
</script>
Hii! Thanks for sending over the code
Linked below is a Loom video showing what I mean by “not loading”:
Let me know if there’s anything I can do to solve for this! All the best!!
Hi @Support-Luis ! This is the final code I injected and I showed the elements I added - can’t get it to work tho 
<script>
// Function to handle changes in the DOM
function handleMutation(mutationsList) {
mutationsList.forEach((mutation) => {
// Check if the style attribute of element A changes
if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
// Check if element A is hidden
const elementA = document.getElementById('#resource-cms');
if (elementA.style.display === 'none') {
// Hide element B
document.getElementById('#resource-active').classList.add('hide');
} else {
// Show element B
document.getElementById('#resource-active').classList.remove('hide');
}
}
});
}
// Target element A
const targetNode = document.getElementById('#resource-cms');
// Create a new instance of Mutation Observer with a callback function
const observer = new MutationObserver(handleMutation);
// Configure the observer to watch for changes in the style attribute of element A
const config = { attributes: true };
// Start observing the target element
observer.observe(targetNode, config);
// Example: Toggle the visibility of element A (for demonstration purposes)
setInterval(() => {
const elementA = document.getElementById('#resource-cms');
elementA.style.display = elementA.style.display === 'none' ? '' : 'none';
}, 2000); // Toggle every 2 seconds for demonstration
</script>
Hey @Jorge1, when using document.getElementById we do not need the #
here is the corrected code with some changes to make it easier to read.
<script>
function handleMutation(mutationsList) {
const targetElement = document.getElementById('resource-cms');
const displayElement = document.getElementById('resource-active');
mutationsList.forEach((mutation) => {
if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
const isTargetElementHidden = targetElement.style.display === 'none';
displayElement.classList.toggle('hide', isTargetElementHidden);
}
});
}
const targetNode = document.getElementById('resource-cms');
const observer = new MutationObserver(handleMutation);
const config = { attributes: true };
observer.observe(targetNode, config);
</script>
Also, on the issue with the load time for the Custom Select, I am baffled. We can try to change the defer tag to async and see if this speeds things up a bit.