[V3] Difference in update hook when binding to array compared to V2 #6665

AntonioDiPassio-AppSys · 2023-09-05T07:16:13Z

AntonioDiPassio-AppSys
Sep 5, 2023

Livewire version

v3.0.1

Which PHP version are you using?

PHP 8.1

Repository URL

No response

Steps To Reproduce

Setup both a livewire 2 and livewire 3 installation:

Livewire 2

laravel new lw2
cd lw2
composer require livewire/livewire:"^2.0"
php artisan livewire:make test-checkboxes
edit /resources/views/welcome.blade.php

<html>
    <head>
        @livewireScripts
    </head>
    <body>
        <livewire:test-checkboxes/>
    </body>
</html>

edit /app/Http/Livewire/TestCheckboxes.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class TestCheckboxes extends Component
{
    public $checkboxes = [
        'one',
        'two',
        'three'
    ];

    public $selectedCheckboxes = [
        'one',
        'two',
        'three'
    ];

    public function updatedSelectedCheckboxes($value)
    {
       dump($value);
    }
}

edit /resources/views/livewire/test-checkboxes.blade.php

<div>
    @foreach($checkboxes as $checkbox)
        <input type="checkbox" value="{{ $checkbox }}" wire:model.defer="selectedCheckboxes"> {{ $checkbox }}
    @endforeach

    <button wire:click="$refresh">OK</button>
</div>

npm i && npm run build
php artisan serve
go to http://127.0.0.1:8000
uncheck checkbox two and click OK

Livewire 3

laravel new lw3
cd lw3
composer require livewire/livewire:"^3.0"
php artisan livewire:make test-checkboxes
edit /resources/views/welcome.blade.php

<html>
    <head>
        @livewireScripts
    </head>
    <body>
        <livewire:test-checkboxes/>
    </body>
</html>

edit /app/Livewire/TestCheckboxes.php

<?php

namespace App\Livewire;

use Livewire\Component;

class TestCheckboxes extends Component
{
    public $checkboxes = [
        'one',
        'two',
        'three'
    ];

    public $selectedCheckboxes = [
        'one',
        'two',
        'three'
    ];

    public function updatedSelectedCheckboxes($value)
    {
       dump($value);
    }
}

edit /resources/views/livewire/test-checkboxes.blade.php

<div>
    @foreach($checkboxes as $checkbox)
        <input type="checkbox" value="{{ $checkbox }}" wire:model="selectedCheckboxes"> {{ $checkbox }}
    @endforeach

    <button wire:click="$refresh">OK</button>
</div>

npm i && npm run build
php artisan serve --port 8001
go to http://127.0.0.1:8001
uncheck checkbox two and click OK

Notice the difference in the 2 dumps. In V2 the updated hook is called once with an array of the values, in V3 the updated hook is called for every value in the array, with a weird rm value in the mix.

Additional information

No response

Please confirm (incomplete submissions will not be addressed)

I have provided easy and step-by-step instructions to reproduce the bug.
I have provided code samples as text and NOT images.
I understand my bug report will be removed if I haven't met the criteria above.

luanfreitasdev · 2023-09-05T16:43:52Z

luanfreitasdev
Sep 5, 2023

I don't think it's a problem, because internally it's not setting the __rm__ property when we update the nested array, but it's confusing.

If I call $search and updatedSearch() will have $value set properly,
But if it's an array, $checkbox and call updatedCheckbox() inside a foreach, Livewire will do a recursion work and use __rm__ to call unset().

    public function updatedSelectedCheckboxes($value, $value2)
     {
         // after unchecked "three": $value = "__rm__", $value2 = 2 (index)
         // after checked "three": $value = "three", $value2 = 2 (index)
         dump($value, $value2);
     }

I don't know what the best approach is, maybe not using the $value parameter and using it inside the function: $this->selectedCheckboxes ?
Or update the documentation for these cases.

0 replies

joshhanley · 2023-09-06T11:57:19Z

joshhanley
Sep 6, 2023
Maintainer

@AntonioDiPassio-AppSys thanks for reporting! Can you provide screenshots of both the dumps? Thanks!

1 reply

AntonioDiPassio-AppSys Sep 6, 2023
Author

@joshhanley unfortunately I already removed both test installations, but I just tell you what they were:

in Livewire 2 the updated hook got called only once, with $value equal to array ['one','three']
in Livewire 3 the updated hook got called twice, with $value equal to string 'three' on the first iteration, and then $value was equal to string 'rm' on the second iteration

stebers · 2023-09-08T13:21:06Z

stebers
Sep 8, 2023

I am experiencing also some weird behaviour of updating hook in combination with checkboxes in v3.

Steps to Reproduce

Add public $checkboxes = [] property to a livewire component
Add 2 input fields to component's blade

<input type="checkbox" wire:model.live="checkboxes" value="box1" />
<input type="checkbox" wire:model.live="checkboxes" value="box2" />

Add updating hook to component

public function updatingCheckboxes($value, $index) { if ($value !== '__rm__') return; dd($value, $index, $this->checkboxes); }

Now test it in frontend by checking box1 and then box2. Then uncheck box1 while box2 is still checked and experience the following:
Note that $this->checkboxes = ["box2", "box2"] and that $index is not 0

My problem with this is that I would like to get the value in the updating hook by index like $this->checkboxes[$index], which is currently not working if there are more than one checkbox checked.

0 replies

seabasss · 2023-09-12T22:54:33Z

seabasss
Sep 12, 2023

I'm having the same problem with a multi select box. When items are removed, they get replaced by "rm", which makes it to the backend as well. I have to run this in the render method:

$this->form->tags = array_filter($this->form->tags, fn ($value) => $value !== '__rm__');

Had no issues in Live Wire 2. Any ideas?

0 replies

sha-hin · 2023-10-08T14:09:56Z

sha-hin
Oct 8, 2023

Same problem, I've to move all updated logic when value is an array to the rendering method.
The hook gets called x times given x is the number of the array items.

0 replies

shokanshi · 2023-10-08T16:13:08Z

shokanshi
Oct 8, 2023

Same issue with multi-select. Unselecting will cause the removed item to be replaced with "__rm__" and a form submit will cause this value to be sent to the server.

Looking at the network from devtool, the following is observed under "updates" object:

{selections.0: "__rm__", selections.1: "__rm__", selections.2: "three"}

Forgot to mention, and because of this __rm__ , if all items are removed from the selection, the validation rule for required will still pass because the array is not empty.

0 replies

seabasss · 2023-10-11T00:21:11Z

seabasss
Oct 11, 2023

Any ideas on this topic? Thank you! :)

0 replies

jehadassaf · 2023-11-29T14:21:29Z

jehadassaf
Nov 29, 2023

This is a breaking change for our application, rendering it completely unusable and blocking any attempts at working around the issue and upgrading to v3. Was this change intentional or is this a bug? If this was intentional and is the new way forward, there is no way we can continue using Livewire because our application relies on many inputs with huge arrays. If this is a bug, can anyone with knowledge on the matter please have a look at it? I'd be glad to contribute and help but this is way beyond my knowledge of the Livewire internals and it's surely impacting a large number of users, many of whom may not even be aware of the issue as it's not documented in the upgrade guide.

0 replies

seabasss · 2023-12-27T19:19:06Z

seabasss
Dec 27, 2023

Any news on this topic? Thank you!

0 replies

iwan-izotov · 2024-01-16T11:55:22Z

iwan-izotov
Jan 16, 2024

Hello, there is a hack. You can pass an object rather than an array in JavaScript and everything will work as in Liwevire2.
Example:
Before:

 treeSelectChangeHandler (values) {
      this.$wire.set('propertyIDs', values);
  },

After:

   treeSelectChangeHandler (values) {
        this.$wire.set('propertyIDs', Object.assign({}, values));
    },

1 reply

iamnoorsk May 9, 2024

it's work for me
thanks @iwan-izotov

seabasseee · 2024-01-31T18:04:39Z

seabasseee
Jan 31, 2024

Any news on this topic? Thank you!

0 replies

Xety · 2024-03-17T23:54:18Z

Xety
Mar 17, 2024

This bug is still there in V3.4.9.

EDIT: Sorry to ping you @joshhanley but is that a confirmed bug or we do something bad ?
Cause i have to do the following to have my arrays working as intended :

    /**
     * Function to update the model and return it after.
     *
     * @return Maintenance
     */
    public function update(): Maintenance
    {
        // Hack to counter a bug in Livewire
        // https://github.com/livewire/livewire/discussions/6665
        $this->operators = array_filter($this->operators, fn ($value) => $value !== '__rm__');
        $this->companies = array_filter($this->companies, fn ($value) => $value !== '__rm__');
        $this->incidents = array_filter($this->incidents, fn ($value) => $value !== '__rm__');

        //...

And i'm pretty sure that when I developped my website like 4/5 months ago, this bug wasn't there.

0 replies

shokanshi · 2024-03-27T03:38:41Z

shokanshi
Mar 27, 2024

After much digging, I have finally found out the cause on my end for appending __rm__ back into the result array after updated lifecycle hook.

My component is using a custom trait that will trim strings upon any form submission and the trait is not taking into account of __rm__ value and readding it back into the result after livewire passes through the updated hooks.

If you are facing this __rm__ issue, check if you are using any custom trim string trait.

11 replies

Xety Mar 30, 2024

@joshhanley I have the same trait as @seabasss too.

Btw, why Livewire does not handle the "trim string" and "convert to null" by default like Laravel? It look like many people are using a custom trait to handle it as we can see in this discussion.
Can Livewire handle that by providing a default trait that we can include (or not) in our component/form ?

seabasss Mar 30, 2024

@Xety His own words: #823 (comment)

I think that Livewire is actually disabling the Laravel trim and null feature, so it’s not that it doesn’t support it.

Xety Mar 30, 2024

@seabasss Yes but as you can see in this discussion and event in this discussion too #823 (comment) people like to use those traits from Laravel. Btw the comment is from 3 years ago, so maybe his mind has changed now regarding this problem.
The real question is why disabling it in Livewire while Laravel use it by default ?
To avoid confusion I think Livewire should use it by default or at least provide a trait to use it if needed and document it.

seabasss Mar 30, 2024

@Xety My guess is that Livewire is... live. So if you send data to the server on every keystroke you wouldn't be able to add spaces, since Livewire would trim them off all the time.

joshhanley Mar 31, 2024
Maintainer

@seabasss Thanks for sharing!

@Xety yeah, @seabasss is correct. If we kept Laravel's TrimStrings and ConvertEmptyStringsToNull middleware, it would mess with the Livewire payload, which could trigger a PayloadCorruptionException due to the security check we have (as Livewire request properties are in a different structure than Laravel) and as mentioned, Livewire can have live data updates, so trimming a string could actually prevent a user from typing in a space.

We are slowly working on adding convert to null support to all of the property synths, so at least we don't end up with empty strings when something (like an int property) should be null instead.

But for trim strings you will still need to do that manually.

adityadees · 2024-05-09T10:58:08Z

adityadees
May 9, 2024

What equivalent for this?
In v2, I can see this working fine

    Livewire.hook('message.sent', (message, component) => {
        $("#responsive-datatable").DataTable().destroy()
    });

    Livewire.on("componentUpdate", (event) => {
      $('#responsive-datatable').DataTable();
    });

but on v3 this not working

    Livewire.hook('commit', ({
        component,
    }) => {
        $("#responsive-datatable").DataTable().destroy();
    })
    
    Livewire.on('componentUpdate', () => {
        $("#responsive-datatable").DataTable();
    })

0 replies

[V3] Difference in update hook when binding to array compared to V2 #6665

Livewire version

Which PHP version are you using?

Repository URL

Steps To Reproduce

Additional information

Please confirm (incomplete submissions will not be addressed)

Replies: 14 comments · 13 replies

joshhanley Sep 6, 2023 Maintainer

AntonioDiPassio-AppSys Sep 6, 2023 Author

joshhanley Mar 31, 2024 Maintainer

Replies: 14 comments 13 replies

joshhanley
Sep 6, 2023
Maintainer

AntonioDiPassio-AppSys Sep 6, 2023
Author

joshhanley Mar 31, 2024
Maintainer