Filament•16mo ago

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());

$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,
    ]);
}

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,
    ]);
}

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:

7 Replies

Andrew WalloOP•16mo ago

Here's another way to show you so that you know its the "id". This results in no errors:

public function mount(): void
{
    $data = $this->getFormModel()->attributesToArray();

    unset($data['id']);

    $this->form->fill($data);
}

public function mount(): void
{
    $data = $this->getFormModel()->attributesToArray();

    unset($data['id']);

    $this->form->fill($data);
}

Oumaima•15mo ago

can I ask you please , how did you do this , is it via some package or plugin ? thnk you

Andrew WalloOP•15mo ago

Yeah of course! It is public so here you go. https://github.com/andrewdwallo/erpsaas/blob/1.x/app/Http/Livewire/Invoice.php

GitHub

erpsaas/app/Http/Livewire/Invoice.php at 1.x · andrewdwallo/erpsaas

Contribute to andrewdwallo/erpsaas development by creating an account on GitHub.

Andrew WalloOP•15mo ago

You can install the repo and try it out if you like.

Oumaima•15mo ago

you generate the invoice automatically or statically

Andrew WalloOP•15mo ago

I havent worked on the actual invoice yet. This is just for a preview of the invoice of what it would look like based on the User's settings for it. But the application is in Filament v2, so currently I am trying to get a Filament v3 version working so it will be a minute before I do that part.

cheesegrits•15mo ago

Are you setting a statePath() on your form? I've noticed before that including an 'id' field in your form without using something like statePath('data') will mess things up, because then the it gets added as a public property directly on the component, which overrides Livewire's own 'id' property. Scoping your attributes to a data array fixes it.

Gaming

Programming

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