Dynamic Content Block Refresh Issue

[DLitvack]

Good Day to All!

I have a dynamic content block with the script shown below.  I have placed this content block on a dashboard page.  When the page first shows, the content block does not function properly (See No Refresh image); that is, selecting a single element does nothing.  However, if I refresh the content block (using the refresh button {See Refresh Button iamge} on the content block) before selecting an item, the content block works (See Post Refresh image).  I have tried timeouts, but to no avail.  Does anyone have any idea why this would be the case?

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

    <!-- This script creates a selectable list of manufacturers from cmdb_ci_ip_router, including blank -->

    <!-- This evaluate populates the selectable control with all the non-blank manufacturers -->
<g:evaluate var="jvar_items" object="true">
    var ga = new GlideAggregate('cmdb_ci_ip_router');
    ga.addNotNullQuery('manufacturer');
    ga.groupBy('manufacturer');
    ga.orderBy('manufacturer');
    ga.query();

    var items = [];
    while(ga.next()){
        var technicalValue = ga.getValue('manufacturer');
        var displayVal = ga.manufacturer.getDisplayValue();

        if (displayVal) {
            // Check if an object with this technical value already exists in our items array
            var alreadyExists = items.some(function(item) {
                return item.display === displayVal;
            });

            if (!alreadyExists) {
                items.push({ 
                    'value': technicalValue, 
                    'display': displayVal
                });
            }
        }
    }
    items; 

</g:evaluate>

    <script>

        var myHandler = new DashboardMessageHandler("mfg_filter_2026");

        function publishFilter() 
        //Function to define the filter
        {
            var selectElement = document.getElementById("mfg_select");
            var selectedOptions = Array.from(selectElement.selectedOptions);

            // --- Update count of selected items ---
            var countDisplay = document.getElementById("selection_count");
            if (countDisplay) {
                countDisplay.innerHTML = selectedOptions.length;
            }

            var table = "cmdb_ci_ip_router"; //Table containing manufacturers
            var field = "manufacturer"; //Key field - manufacturer
            
            var values = []; //Initialize selection to null
            var hasEmpty = false; //Initialize selected empty to False

            selectedOptions.forEach(function(opt) {
                if (opt.value === "BLANK") {
                    hasEmpty = true; //Selected to view blanks
                } else if (opt.value !== "") {
                    values.push(opt.value); //Get selected values
                }
            });

            var filterString = ""; //Initialize filter string to null
            if (values.length > 0 &amp;&amp; hasEmpty) {
                filterString = field + "IN" + values.join(',') + "^OR" + field + "ISEMPTY"; //Filter for selection + blanks
            } else if (values.length > 0) {
                filterString = field + "IN" + values.join(','); //Filtering for selections
            } else if (hasEmpty) {
                filterString = field + "ISEMPTY"; //Filtering for blanks
            }

            if (filterString !== "") //If there is something to filter
            {
                if (window.SNC &amp;&amp; SNC.canvas &amp;&amp; SNC.canvas.interactiveFilters) {
                    SNC.canvas.interactiveFilters.removeDefaultValue();
                    SNC.canvas.interactiveFilters.setDefaultValue({
                        id: "mfg_filter_2026",
                        filters: [{ table: table, filter: filterString }]
                    }, false);
                }
                myHandler.publishMessage(table, filterString); //Apply defined filter
            } else {
                myHandler.removeFilter(); //No filter so remove all filters
            }
        }

        function selectAllOptions() 
        //Function to select all manufacturers when Select All button is pressed
        {
            var selectElement = document.getElementById("mfg_select");
            var options = selectElement.options;
            //Loop through and select all items in list
            for (var i = 0; i &lt; options.length; i++) {
                options[i].selected = true;
            }
            // Immediately apply the filter after selecting all
        		publishFilter();
        }

    </script>

    <div style="padding:10px;">
        <label for="mfg_select">Select one or more Manufacturers (Press Select All button to clear selections):</label>

        <select id="mfg_select" class="form-control" multiple="multiple" size="5" onchange="publishFilter()">
            <option value="BLANK" selected="selected">-- BLANKS (empty) --</option>
            <j:forEach items="${jvar_items}" var="jvar_item">
                <option value="${jvar_item.value}" selected="selected">${jvar_item.display}</option>
            </j:forEach>
        </select>
        
    <div style="margin-top:10px;">
        <!-- SELECT ALL BUTTON -->
        <button type="button" class="btn btn-primary" onclick="selectAllOptions()" style="margin-right:5px;">Select All</button>
    </div>

	<div style="margin-bottom: 5px; font-weight: bold;">
	# Items Selected: <span id="selection_count">0</span>
	</div>

	<script>
		selectAllOptions();
	</script>

	</div>
</j:jelly>

 (See