Fix CheckboxList UI not updating when values are set programmatically

[readingdancer]

Fixes: #19437

Prerequisites

• I have added steps to test this contribution in the description below

This fixes the CheckboxList UI update issue where programmatically set values don't reflect in the UI until page refresh.

Description
What did I do?
Fixed a UI synchronization bug in the CheckboxList property editor where setting values programmatically (via JavaScript) would not update the visual state of the checkboxes until the page was refreshed.

Why did I do it?
The UmbPropertyEditorUICheckboxListElement had a disconnect between its internal value storage (#selection) and the UI rendering state (_list items). When the value setter was called programmatically, it updated the selection array but failed to sync the checked property of the list items that control the visual checkbox states.
This caused confusion for developers building custom property editors or integrations, as the UI would appear broken despite the underlying data being correct.

How can we test the changes?

1. Create test setup:

• Create a document type with a CheckboxList property
• Configure it with options: "Red", "Green", "Blue"
• Create a document using this document type

2. Test programmatic value setting:

   // In browser console or custom property editor
   const checkboxElement = document.querySelector('umb-property-editor-ui-checkbox-list');
   checkboxElement.value = ["Red", "Blue"];

3. Verify immediate UI update:

• ✅ Expected: "Red" and "Blue" checkboxes should immediately appear checked
• ❌ Before fix: No checkboxes would appear checked until page refresh
• ✅ After fix: Checkboxes update immediately

4. Test edge cases:

• Setting empty array: element.value = [] (should uncheck all)
• Setting single value: element.value = ["Green"] (should check only Green)
• Setting invalid values: element.value = ["Invalid"] (should handle gracefully)

Technical Implementation:

• Added #updateCheckedState() method that:
• Maps through _list items and updates their checked property based on current #selection
• Triggers requestUpdate() to ensure Lit element re-renders
• Called from the value setter to maintain UI synchronization

Code Changes:

• Modified property-editor-ui-checkbox-list.element.ts
• Added 6 lines of code (method + call)
• Zero breaking changes - purely additive fix
• Maintains all existing functionality

This fix ensures the CheckboxList property editor behaves consistently whether values are set through user interaction or programmatically, improving the developer experience for custom integrations and property editors.

[github-actions]

Hi there @readingdancer, thank you for this contribution! 👍

While we wait for one of the Core Collaborators team to have a look at your work, we wanted to let you know about that we have a checklist for some of the things we will consider during review:

• It's clear what problem this is solving, there's a connected issue or a description of what the changes do and how to test them
• The automated tests all pass (see "Checks" tab on this PR)
• The level of security for this contribution is the same or improved
• The level of performance for this contribution is the same or improved
• Avoids creating breaking changes; note that behavioral changes might also be perceived as breaking
• If this is a new feature, Umbraco HQ provided guidance on the implementation beforehand
• 💡 The contribution looks original and the contributor is presumably allowed to share it

Don't worry if you got something wrong. We like to think of a pull request as the start of a conversation, we're happy to provide guidance on improving your contribution.

If you realize that you might want to make some changes then you can do that by adding new commits to the branch you created for this work and pushing new commits. They should then automatically show up as updates to this pull request.

Thanks, from your friendly Umbraco GitHub bot 🤖 🙂

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

[readingdancer]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

Can you try again?

[Copilot]

Pull Request Overview

This PR fixes a UI synchronization bug in the CheckboxList property editor that prevented programmatically set values from immediately updating the UI.

• Added a private method #updateCheckedState() to update the checked property on list items based on the current selection.
• Modified the value setter to call #updateCheckedState(), ensuring the UI is correctly re-rendered when values change.

Comments suppressed due to low confidence (1)

src/Umbraco.Web.UI.Client/src/packages/property-editors/checkbox-list/property-editor-ui-checkbox-list.element.ts:33

• Ensure that the new #updateCheckedState method is thoroughly covered by tests, especially for edge cases like handling an empty _list or invalid values in selection.

this.#updateCheckedState();

[readingdancer]

@leekelleher - Thanks for triggering that CoPilot review, based on it's feedback I've added some unit tests. I hope someone can take a look at this PR as I need the fix for a package I am building :) I have another similar PR in the pipeline for dropdowns and multi-select boxes, but it would be good to know if these will get approved / needs any changes before I submit the next one.

[Copilot]

Pull Request Overview

Fix CheckboxList UI not updating when values are set programmatically

• Added #updateCheckedState() to synchronize visual checkbox states when the value setter is called
• Updated the value setter to invoke the new method and trigger a Lit re-render
• Expanded tests to cover programmatic value setting, various configurations, and readonly mode

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
src/Umbraco.Web.UI.Client/src/packages/property-editors/checkbox-list/property-editor-ui-checkbox-list.element.ts	Added #updateCheckedState() and wired it into the value setter
src/Umbraco.Web.UI.Client/src/packages/property-editors/checkbox-list/property-editor-ui-checkbox-list.test.ts	Added tests for programmatic value setting, configuration handling, and readonly behavior

Comments suppressed due to low confidence (2)

src/Umbraco.Web.UI.Client/src/packages/property-editors/checkbox-list/property-editor-ui-checkbox-list.element.ts:111

• The readonly property on UmbPropertyEditorUICheckboxListElement isn’t propagated to the child <umb-input-checkbox-list>, so the UI won’t actually render in readonly mode. Bind the readonly attribute (or property) through to the child component.

<umb-input-checkbox-list

src/Umbraco.Web.UI.Client/src/packages/property-editors/checkbox-list/property-editor-ui-checkbox-list.test.ts:42

• Tests currently assert only the selection array. Add assertions that inspect the actual rendered checkbox inputs (e.g., input[type=checkbox]) to confirm their checked properties match the expected state.

const checkboxListInput = element.shadowRoot?.querySelector('umb-input-checkbox-list');

[Copilot]

Pull Request Overview

This PR fixes a UI synchronization bug in the CheckboxList property editor so that the checkbox states update immediately when values are set programmatically. The key changes include:

• Invoking a new method (#updateCheckedState) in the value setter to keep the internal selection and visual state in sync.
• Adding comprehensive test cases to validate programmatic updates, configuration handling, and edge case behavior.
• Improving overall test coverage with helper functions to verify the DOM and model state correlation.

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
property-editor-ui-checkbox-list.element.ts	Introduced #updateCheckedState to update checkbox states immediately upon value changes
property-editor-ui-checkbox-list.test.ts	Added tests to validate UI updates for various programmatic value settings and configuration scenarios

[readingdancer]

How to replicate the issue and test that the PR fixes it.

You can easily test this in a browser.

• Add a check box list to a document type
• Open up a content page using Chrome with the check box list
• Open Chrome Dev Tools
• Select the check box list then right click it in the Elements code view
• Click "Store as global variable"
• Use this variable to try and set the values, e.g. in my example: temp2.value = ['Pork']

What we expect is this will select the box, but nothing seems to happen, even though you have set the correct variable.

Note: In our plugin code we would be using setValue to do the same thing.

Example that is not working

Now if you use my PR and try the same thing, you will see it does select the boxes.

After the PR has been applied