disable preview by default; sanitize value before setting background color

nicegui/elements/color_input.py

@@ -15,7 +15,7 @@ class ColorInput(ValueElement, DisableableElement):
                  placeholder: Optional[str] = None,
                  value: str = '',
                  on_change: Optional[Callable[..., Any]] = None,
-                 preview: bool = True,
+                 preview: bool = False,
                  ) -> None:
         """Color Input
 
@@ -23,7 +23,7 @@ class ColorInput(ValueElement, DisableableElement):
         :param placeholder: text to show if no color is selected
         :param value: the current color value
         :param on_change: callback to execute when the value changes
-        :param preview: change button background to selected color
+        :param preview: change button background to selected color (default: False)
         """
         super().__init__(tag='q-input', value=value, on_value_change=on_change)
         if label is not None:
@@ -37,10 +37,7 @@ class ColorInput(ValueElement, DisableableElement):
                 .props('flat round', remove='color').classes('cursor-pointer')
 
         self.preview = preview
-        if self.preview:
-            self.button.style(f'background-color: {value or "#fff"}')
-            self.button.style(
-                'text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff')
+        self._update_preview()
 
     def open_picker(self) -> None:
         """Open the color picker"""
@@ -49,10 +46,13 @@ class ColorInput(ValueElement, DisableableElement):
         self.picker.open()
 
     def on_value_change(self, value: Any) -> None:
-        """Modify button color.
-
-        :param value: The new value.
-        """
         super().on_value_change(value)
-        if self.preview:
-            self.button.style(f'background-color: {value or "#fff"}')
+        self._update_preview()
+
+    def _update_preview(self) -> None:
+        if not self.preview:
+            return
+        self.button.style(f'''
+            background-color: {(self.value or "#fff").split(";", 1)[0]};
+            text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
+        ''')