Merge pull request #16571 from craftcms/bugfix/16554-ui-elements-inst…

…antiation

UI element instantiation (part 2 of 16554)

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - Fixed an error that could occur when eager-loading nested elements’ owners, if any of the queried elements didn’t have an owner ID. ([#16570](https://github.com/craftcms/cms/issues/16570), [#16572](https://github.com/craftcms/cms/issues/16572), [#16576](https://github.com/craftcms/cms/issues/16576))
 - Fixed a bug where collapsed elements within element indexes in structure view weren’t showing their expand/collapse toggles.
+- Fixed a bug where Color fields weren’t getting fully instantiated within slideouts, Live Preview, and after copying the field value from another site. ([#16571](https://github.com/craftcms/cms/pull/16571))
 
 ## 5.6.2 - 2024-01-28
 

src/web/assets/cp/src/js/CpScreenSlideout.js

@@ -387,9 +387,11 @@ Craft.CpScreenSlideout = Craft.Slideout.extend(
         this.$footer.removeClass('hidden');
 
         Garnish.requestAnimationFrame(async () => {
-          Craft.initUiElements(this.$content);
+          // Execute the response JS first so any Selectize inputs, etc.,
+          // get instantiated before field toggles
           await Craft.appendHeadHtml(data.headHtml);
           await Craft.appendBodyHtml(data.bodyHtml);
+          Craft.initUiElements(this.$content);
           Craft.cp.elementThumbLoader.load($(this.$content));
 
           if (data.sidebar) {

src/web/assets/cp/src/js/ElementEditor.js

@@ -680,9 +680,11 @@ Craft.ElementEditor = Garnish.Base.extend(
 
           const $newField = $(fieldHtml);
           $field.replaceWith($newField);
-          Craft.initUiElements($newField);
+          // Execute the response JS first so any Selectize inputs, etc.,
+          // get instantiated before field toggles
           await Craft.appendHeadHtml(headHtml);
           await Craft.appendBodyHtml(bodyHtml);
+          Craft.initUiElements($newField);
 
           Craft.cp.displaySuccess(message);
         } finally {

src/web/assets/cp/src/js/Preview.js

@@ -395,9 +395,11 @@ Craft.Preview = Garnish.Base.extend(
         this.$editorContainer.serialize()
       );
 
-      Craft.initUiElements(this.$editorContainer);
+      // Execute the response JS first so any Selectize inputs, etc.,
+      // get instantiated before field toggles
       await Craft.appendHeadHtml(data.headHtml);
       await Craft.appendBodyHtml(data.bodyHtml);
+      Craft.initUiElements(this.$editorContainer);
 
       this.elementEditor = new Craft.ElementEditor(
         this.$editorContainer,