Issue with Filament KeyValue Component when Editing

Here is my form, which has no errors when creating.

public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\TextInput::make('form')
                    ->required()
                    ->maxLength(255),
                Forms\Components\TextInput::make('title')
                    ->maxLength(255),
                Forms\Components\TextInput::make('title_fr')
                    ->maxLength(255),
                Forms\Components\RichEditor::make('instructions')
                    ->maxLength(65535)
                    ->columnSpanFull(),
                Forms\Components\RichEditor::make('instructions_fr')
                    ->maxLength(65535)
                    ->columnSpanFull(),
                Forms\Components\KeyValue::make('score_description')
                    ->keyLabel('score')
                    ->valueLabel('description'),
                Forms\Components\KeyValue::make('score_description_fr')
                    ->keyLabel('score')
                    ->valueLabel('description'),
            ])->columns(1);
    }

The Model is casting the items as array, the database table data type for them is json. Again, I have no issues creating.

protected $casts = [
        'score_description' => 'array',
        'score_description_fr' => 'array',
    ];

If I edit the model, and delete any of the KeyValue pairs, I get the following error when saving:

Filament\Forms\Components\KeyValue::Filament\Forms\Components\{closure}(): Argument #1 ($value) must be of type ?string, array given

Any suggestions on why this is happening and how I can fix it?

LaryAI

2 years ago

Level 58

It seems like the issue you're encountering is related to the type of data that the KeyValue component is expecting. The error message indicates that the KeyValue component's closure is expecting a string, but it's receiving an array instead.

The KeyValue component in Filament forms is designed to handle an array of key-value pairs, where both the key and the value are strings. However, when you're editing an existing model, the cast to array in your model might be providing an actual array to the component, which it doesn't expect for individual key or value fields.

To resolve this issue, you can try to ensure that the KeyValue component receives the data in the expected format. You might need to transform the array data into a string representation before it's passed to the KeyValue component, and then convert it back to an array when saving.

Here's how you can modify your form to handle the transformation:

public static function form(Form $form): Form
{
    return $form
        ->schema([
            // ... other form components ...
            Forms\Components\KeyValue::make('score_description')
                ->keyLabel('score')
                ->valueLabel('description')
                ->dehydrateStateUsing(function ($state) {
                    return json_encode($state);
                })
                ->hydrateStateUsing(function ($state) {
                    return json_decode($state, true) ?? [];
                }),
            Forms\Components\KeyValue::make('score_description_fr')
                ->keyLabel('score')
                ->valueLabel('description')
                ->dehydrateStateUsing(function ($state) {
                    return json_encode($state);
                })
                ->hydrateStateUsing(function ($state) {
                    return json_decode($state, true) ?? [];
                }),
            // ... other form components ...
        ])->columns(1);
}

In this solution, we're using the dehydrateStateUsing and hydrateStateUsing methods to transform the state when it's being saved and loaded. The dehydrateStateUsing method is used to convert the array into a JSON string before it's saved, and the hydrateStateUsing method is used to convert the JSON string back into an array when the form is being populated for editing.

Make sure that your model's $casts attribute is still in place to handle the JSON to array conversion when interacting with the database:

protected $casts = [
    'score_description' => 'array',
    'score_description_fr' => 'array',
];

This should resolve the type mismatch issue you're experiencing with the KeyValue component when editing your model.

twoarmtom

2 years ago

Best Answer

Level 5

FIXED: The issue was I had a period in the key ("S.O."). With livewire, the O in 'S.O' was treated as a nested array because it's separated with a period. I changed the key to just SO and it fixed the issue.

1 like

PascaleBeier

1 year ago

Level 3

For everyone coming from Google:

In our case, we needed to preserve the dots in the Key Value fields.

<?php

namespace App\Utility;

class LivewireDotStateFix
{
    public static function fix(?array $state): ?array
    {
        if (blank($state)) {
            return $state;
        }

        $fixed = $state;

        foreach ($state as $key => $value) {
            // Check if the key has a dot and the corresponding array exists
            if (str_contains($key, '.')) {
                [$baseKey, $subKey] = explode('.', $key, 2);

                // If the base key is an array and contains the subkey, overwrite the dotted key
                if (isset($state[$baseKey]) && is_array($state[$baseKey]) && array_key_exists($subKey, $state[$baseKey])) {
                    $fixed[$key] = $state[$baseKey][$subKey];
                    unset($fixed[$baseKey]);
                }
            }
        }

        return $fixed;
    }

}

                    KeyValue::make('specs')
                        ->dehydrateStateUsing(fn (?array $state): ?array => LivewireDotStateFix::fix($state))

<?php

namespace Tests\Unit;

use App\Utility\LivewireDotStateFix;
use PHPUnit\Framework\Attributes\DataProvider;
use PHPUnit\Framework\Attributes\Test;
use PHPUnit\Framework\TestCase;

class LivewireDotStateFixTest extends TestCase
{

    #[Test]
    #[DataProvider('stateDataProvider')]
    public function it_can_fix_state(?array $state, ?array $expected): void
    {
        self::assertSame($expected, LivewireDotStateFix::fix($state));
    }

    public static function stateDataProvider(): array
    {
        return [
            'null' => [
                null,
                null,
            ],
            'empty' => [
                [],
                [],
            ],
            'state' => [
                [

                    'a' => 1,
                    'b.2' => 2,
                    'b' => [
                        '2' => 3,
                    ],
                ],
                [
                    'a' => 1,
                    'b.2' => 3,
                ],
            ]
        ];
    }

}

1 like

Please or to participate in this conversation.