FilamentF
Filament•3y ago•
9 replies
Andrew Wallo

Reactivity Issue with ColorPicker Field When "id" Attribute from my Model is Present

In my application, I'm using a ColorPicker field to allow users to select a color. Everything works fine until I include the "id" attribute in the data array passed to fill the form. When the "id" attribute is present, the ColorPicker field loses its reactivity. Specifically, after selecting a color from the color pallet, the field does not retain the selected color, and the color pallet does not remain open. The browser console also throws a ton of errors when it is included versus when it is not included.

Note: I noticed this when using:
$this->form->fill($this->invoice->attributesToArray());


So I tested this out to see what the problem was, and I have to say this is very weird.

This results in zero errors and the Color Picker is working fine.
public function mount(): void
{
    $this->form->fill([
      'number_prefix' => $this->invoice->number_prefix,
      'number_digits' => $this->invoice->number_digits,
      'number_next' => $this->invoice->number_next,
      'payment_terms' => $this->invoice->payment_terms,
      'accent_color' => $this->invoice->accent_color,
      'template' => $this->invoice->template,
    ]);
}


This on the other hand makes the color picker lose its selection after the first choice in color (which it doesn't usually do).
public function mount(): void
{
    $this->form->fill([
      'id' => $this->invoice->id;
      'number_prefix' => $this->invoice->number_prefix,
      'number_digits' => $this->invoice->number_digits,
      'number_next' => $this->invoice->number_next,
      'payment_terms' => $this->invoice->payment_terms,
      'accent_color' => $this->invoice->accent_color,
      'template' => $this->invoice->template,
    ]);
}


Video:
Was this page helpful?