Completed
Last Updated: 14 Nov 2024 15:41 by ADMIN
Release 2024 Q4 (Nov)
Harshith
Created on: 13 Nov 2024 16:52
Category: MultiSelect
Type: Bug Report
12
Issue with MultiSelect Selection Retention on the newest version of Chrome (131.0.6778.70)

When selecting an Item and performing a PostBack, the selected item's value is not accessible once the page reloads.

 

 

 
3 comments
ADMIN
Rumen
Posted on: 14 Nov 2024 15:41

Hello Everyone,

I'm excited to announce that the issue with MultiSelect selection retention on Chrome 131.0.6778.70 has been resolved in our latest release: version 2024.4.1114.

You can download the updated release files from your Telerik account here: 

Alternatively, the updated package is also available via the Telerik NuGet feed.

You can also find upgrade instructions in the Upgrade to a Newer Version of Telerik® UI for ASP.NET AJAX article.

If you’ve been using the provided workaround, we encourage you to update to this new version for a permanent solution. Please don’t hesitate to share your feedback or report any further issues you may encounter.

Thank you for bringing this to our attention and for your support!

 

Regards,
Rumen
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources
Brian
Posted on: 14 Nov 2024 15:38
How do i get this hotfix?  Need it ASAP!
ADMIN
Rumen
Posted on: 14 Nov 2024 12:02

Hi Harshith,

Thank you for reporting this Chrome 131 breaking change!

We are finalizing a hotfix to address this issue comprehensively, and I’m happy to let you know that it is scheduled for release later today. Once it’s available, I will notify to download and update the assembly files.

For the earlier versions, you can apply the following workaround:

Workaround

Add the following Script anywhere on the page but after the ScriptManager declaration.

<script>
    (function () {
        try {
            var original_initialize = Telerik.Web.UI.RadMultiSelect.prototype._initialize;
            Telerik.Web.UI.RadMultiSelect.prototype._initialize = function () {
                var $selectElement = $(this.get_element());
                var $tempWrapper = $('<div></div>').insertBefore($selectElement);

                $selectElement.children().appendTo($tempWrapper);

                original_initialize.call(this);

                $tempWrapper.children().appendTo($selectElement.closest('.RadMultiSelect'));
                $tempWrapper.remove();
            }
        } catch (e) {
            // Nothing to do
        }
    })()
</script>

 

Note: If the above workaround does not work, you can try following approach:

        <telerik:RadMultiSelect ID="rcbUsers" runat="server" Width="500px" DropDownHeight="200px"
            DataValueField="UserID" DataTextField="UserName" TagMode="Multiple" AutoPostBack="true">
            <ClientEvents OnLoad="onMultiSelectLoad" />
        </telerik:RadMultiSelect>
        <script>
        function onMultiSelectLoad(sender) {
            handleClientStateInput(sender);
        }
        function handleClientStateInput(sender) {
            // Chrome 131 breaking change fix
            var clientStateFieldId = sender.get_clientStateFieldID();
            var controlWrapper = sender.get_element();
            var parentContainer = controlWrapper.parentElement;

            if (!parentContainer) {
                return; // Exit if the parent container is not found
            }

            // Check if the ClientState input exists
            var existingInput = document.getElementById(clientStateFieldId);

            if (existingInput) {
                // Ensure the input is within the correct container
                if (existingInput.parentElement !== parentContainer) {
                    parentContainer.appendChild(existingInput);
                }
            } else {
                // Recreate the hidden input element if it doesn't exist
                var clientStateInput = document.createElement("input");
                clientStateInput.id = clientStateFieldId;
                clientStateInput.name = clientStateFieldId;
                clientStateInput.type = "hidden";
                clientStateInput.autocomplete = "off";

                // Set the initial value for the ClientState
                clientStateInput.value = sender.saveClientState();

                // Append the hidden input to the parent container
                parentContainer.appendChild(clientStateInput);
            }
        }
        </script>

 

Regards,
Rumen
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources