[B] Ensure color input can render in drawer

1aurend · 1aurend · commit 9dbb02368d42 · 2025-11-19T09:40:31.000-08:00
diff --git a/client/src/backend/components/hero/Builder/forms/JournalDescription.js b/client/src/backend/components/hero/Builder/forms/JournalDescription.js
@@ -124,11 +124,12 @@ function JournalDescription({
             altTextName="attributes[logoAltText]"
             altTextLabel={t("journals.forms.logo_alt_label")}
           />
-          <Form.TextInput
+          <Form.ColorInput
             label={t("hero.background_color")}
             name="attributes[heroBackgroundColor]"
-            placeholder="#52e3ac"
+            defaultValue="#52e3ac"
             instructions={t("hero.background_color_instructions")}
+            container=".drawer--backend"
             wide
           />
           <Form.TextArea
diff --git a/client/src/global/components/form/ColorInput/ColorInput.js b/client/src/global/components/form/ColorInput/ColorInput.js
@@ -1,17 +1,18 @@
 import { useId, useEffect, useRef } from "react";
+import PropTypes from "prop-types";
 import Coloris from "@melloware/coloris";
 import setter from "../setter";
 import * as Styled from "./styles";
 
-function ColorInput({ defaultValue, ...props }) {
+function ColorInput({ defaultValue, container, ...props }) {
   const id = useId();
   const inputRef = useRef();
   const colorRef = useRef(props.value || defaultValue);
 
   const inputId = `color-input-${id}`;
 
   useEffect(() => {
-    Coloris.init();
+    Coloris.init({ parent: container });
 
     const setColor = event => {
       const isTarget = event.detail.currentEl.id === inputId;
@@ -21,7 +22,7 @@ function ColorInput({ defaultValue, ...props }) {
     document.addEventListener("coloris:pick", setColor);
 
     return () => document.removeEventListener("coloris:pick", setColor);
-  }, [inputId, props]);
+  }, [inputId, container, props]);
 
   useEffect(() => {
     const onClose = () => {
@@ -38,14 +39,15 @@ function ColorInput({ defaultValue, ...props }) {
         themeMode: "dark",
         clearButton: true,
         defaultColor: defaultValue,
-        margin: 5
+        margin: 5,
+        parent: container
       });
 
       inputEl.addEventListener("close", onClose);
 
       return () => inputEl.removeEventListener("close", onClose);
     }
-  }, [inputRef, defaultValue, colorRef, props]);
+  }, [inputRef, defaultValue, colorRef, container, props]);
 
   return (
     <Styled.ColorInput
@@ -60,6 +62,14 @@ function ColorInput({ defaultValue, ...props }) {
   );
 }
 
+ColorInput.propTypes = {
+  defaultValue: PropTypes.string.isRequired,
+  // By default the color picker renders as a dialog in <body>.
+  // Pass a selector if rendering in a focus trap.
+  container: PropTypes.string
+  // See BaseInput for remaining propTypes
+};
+
 export default setter(ColorInput);
 
 ColorInput.displayName = "Form.ColorInput";
