Chris Houston d23c2acd63 Fixes the Checkbox, Dropdown and Select list when the models change the UI updates. (#19487)
* Fix CheckboxList UI not updating when values are set programmatically

* WIP

* Added unit tests for the new functionality in the checkbox list element.

As requested by Copilot, here are some unit tests to ensure this addition passes all of the possible edge cases mentioned.

* Small change based on CoPilot feedback

Removed a check that was redundant and removed a unit test that was also not needed for the current PR and fixed one of the other tests.

* Fixing code quality issues highlighted in the unit tests

* Fix CheckboxList UI not updating when values are set programmatically

* WIP

* Standardizes property editor UI state management

Introduces a utility for managing the state of property editor UI elements
when their values are set programmatically.

This ensures that UI components like dropdowns, checkbox lists, and selects
correctly reflect the selected values, especially when these values are
updated via code rather than direct user interaction.

The changes include:
- A mixin to simplify state updates
- A helper function to ensure values are handled as arrays
- Consistent state updating logic across components.

* Update src/Umbraco.Web.UI.Client/src/packages/property-editors/select/property-editor-ui-select.element.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Removed the hard coded label

* Fixed the short-circuit issue raised by co-pilot

* Fixing more co-pilot suggestions

Also cleaned up the test files based on the JSDocs suggestions.

* Update src/Umbraco.Web.UI.Client/src/packages/property-editors/dropdown/property-editor-ui-dropdown.element.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Refactors checkbox and dropdown tests

Refactors checkbox-list and dropdown property editor UI tests to share common test utilities, reducing code duplication and improving maintainability.
Uses Sets for faster selection lookup in `updateItemsState` function.

* Fixing CodeScene suggestion based on "String Heavy Function Arguments"

* Fix for an issue that was stopping the Bellissima build.

* Improves property editor UI state updates

Ensures UI updates in checkbox list, dropdown and select property editors only occur when necessary.
Avoids unnecessary re-renders by comparing the updated state with the current state, and only triggering an update if there are actual changes.
This improves performance and prevents potential issues caused by excessive re-rendering.

* Changes based on feedback from @nielslyngsoe

* removing unnecessary call to requestUpdate

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Niels Lyngsø <nsl@umbraco.dk>
Co-authored-by: Niels Lyngsø <niels.lyngso@gmail.com>
2025-08-07 08:40:59 -04:00
2025-07-31 06:59:11 +02:00
2024-12-10 10:25:50 +01:00
2022-09-27 14:22:34 +02:00
2024-11-11 13:02:33 +01:00
2025-04-01 11:52:32 +02:00
2024-10-01 15:03:02 +02:00
2025-07-24 09:25:52 +02:00

Umbraco CMS

GitHub license NuGet Version Build status PRs Welcome Forum Chat about Umbraco on Discord Mastodon Follow

Umbraco is a free and open source .NET content management system. Our mission is to help you deliver delightful digital experiences by making Umbraco friendly, simpler and social.

Learn more at umbraco.com

Umbraco Logo

Looking to install Umbraco?

You can get started using the following commands on Windows, Linux and MacOS (after installing the .NET Runtime and SDK):

dotnet new install Umbraco.Templates
dotnet new umbraco --name MyProject
cd MyProject
dotnet run

Documentation

Our comprehensive documentation takes you from the fundamentals on how to start with Umbraco to deploying it to production.

Some important documentation links to get you started:

Get help

If you need a bit of feedback while building your Umbraco projects, we are chatty on Discord. Our Discord server serves both a social space but also has channels for questions and answers. Feel free to lurk or join in with your own questions. Or just post your daily Wordle score, up to you!

Looking to contribute back to Umbraco?

You came to the right place! Our GitHub repository is available for all kinds of contributions:

Umbraco is contribution-focused and community-driven. If you want to contribute back to the Umbraco source code, please check out our guide to contributing.

Tip: You should not run Umbraco from source code found here. Umbraco is extremely extensible and can do whatever you need. Instead, install Umbraco as noted above and then extend it any way you want to.

Description
Umbraco is a free and open source .NET content management system helping you deliver delightful digital experiences.
Readme 448 MiB
Languages
C# 59.5%
TypeScript 39.9%
JavaScript 0.3%
HTML 0.2%