KeyValue field updates state from the second time

[finoghentov]

Package

filament/filament

Package Version

3.2

Laravel Version

10.10

Livewire Version

3.4

PHP Version

8.1

Problem description

I have a simple resource editing form.

KeyValue::make('options'),
Select::make('type')
  ->options(array_column(BoostType::cases(), 'name'))
  ->afterStateUpdated(function (Component $component, Set $set) {
        $set('options', ['test' => rand(0, 1000)]);
  })
  ->nullable(false)
  ->live()

Key value update state only from the second time

The problem in this script

Initializing the component with NON empty value triggers updateState method which switches shouldUpdateRows flag to false

https://github.com/filamentphp/filament/blob/3.x/packages/forms/resources/js/components/key-value.js#L15

if (this.rows.length <= 0) {
    this.rows.push({ key: '', value: '' })
} else {
    this.updateState()
}

https://github.com/filamentphp/filament/blob/3.x/packages/forms/resources/js/components/key-value.js#L105

this.shouldUpdateRows = false

While first updating field state we trigger next code which switch flag to true
https://github.com/filamentphp/filament/blob/3.x/packages/forms/resources/js/components/key-value.js#L72

if (!this.shouldUpdateRows) {
    this.shouldUpdateRows = true
    return
}

I've found that this was required to fix this bug but we need to find a better decision. Maybe something like this:

updateState: function () {
    let state = {}

    let keys = [];

    for (let i in this.rows) {
        if (
            keys.includes(this.rows[i].key) ||
            this.rows[i].key === '' ||
            this.rows[i].key === null
        ) {
            return;
        }

        keys.push(this.rows[i].key);
        state[this.rows[i].key] = this.rows[i].value
    }

    this.state = state
},

Remove shouldUpdate flag and do not update the state if we've found empty or duplicated keys. But maybe we should make a warning to make users understand that with duplicated keys state won't be updated

Expected behavior

I expect that changing the Select value will update the KeyValue state, but it works only If I change Select 2 times.
It works only if you are updating the resource with some filled value in KeyValue.

Steps to reproduce

• Create resource
• Paste example code in resource editing form
• Create resource entity and put some json to entity in database
• Update created entity and try to change select value

Reproduction repository

https://github.com/finoghentov/filament-key-value-bug

Relevant log output

No response

Donate 💰 to fund this issue

• You can donate funding to this issue. We receive the money once the issue is completed & confirmed by you.
• 100% of the funding will be distributed between the Filament core team to run all aspects of the project.
• Thank you in advance for helping us make maintenance sustainable!

[alexmanase]

Do you still have the problem? I just tried the reproduction repository and it seemed to work.

Screen.Recording.2024-06-04.at.21.37.00.mov

[finoghentov]

Do you still have the problem? I just tried the reproduction repository and it seemed to work.

Screen.Recording.2024-06-04.at.21.37.00.mov

To reproduce this bug you should do an update of resource.

[alexmanase]

I added ->live() to the KeyValue input and it worked for me 🙂

[finoghentov]

I added ->live() to the KeyValue input and it worked for me 🙂

It works only from the second change. Please make sure, that you check it in editing form

[alexmanase]

Yes, I tried from the editing form.

Screen.Recording.2024-06-11.at.19.21.18.mov