Select multiple rendering bug after refresh or hydrated page

[Tiagospem]

I use async search to save user ids on DB, after select some users I got one array like [1, 2, 3...]. So I implode this and save a string like "1,2,3", to retrieve the ids I explode and got an array back.

After that, when there is a change on the page, the select has a problem, but only when the data is retrieved from the database.

https://user-images.githubusercontent.com/8459781/176779066-f1fb4ae4-9011-4ca9-bce1-bcfa357cf62e.mp4

[PH7-Jack]

@Tiagospem After the model changes, which actions do you run in the livewire? The "mount" method only run one time Show me your project versions

• laravel
• livewire
• wireui
• alpinejs

[Tiagospem]

@PH7-Jack Estou utilizando o async search com o atributo multiple para selecionar alguns usuários de uma lista.

Como você pode ver no vídeo o model $usuarios recebe um array de usuários e na view é possível ver os três dados selecionados como esperado.

O bug ocorre no momento em que acontece alguma interação na página, como você pode ver no vídeo eu aciono o método update que só exibe um alerta, não ocorre nenhuma modificação nos dados, mesmo assim o componente buga "duplicando as informações".

Se reparar no vídeo na linha 21, é onde o bug ocorre:

$usuarios_db = explode(',', $taferas->visibilidade_user_ids); //retorna [1, 2, 3]

Na linha 23, funciona normalmente

$usuarios_db = explode(',', '1, 2, 3'); //retorna [1, 2, 3]

Estou utilizando as versões mais recentes de todos os pacotes.

[Krato]

This is happening to me also.

I fix some of this problems removing the .defer on wire:model.

For me the problem is only happening when is multiple and using async. I have implemented the search and selected filters on the url query. So I load the component and works fine. But when I try to add another option selecting, the options multiplicates.

Let me show on a video:

https://user-images.githubusercontent.com/74367/178463731-be621a47-a9dc-4e3a-898a-e7a824dd3bf1.mov

[Tiagospem]

@Krato I tried to remove the .defer but it keeps happening, any ajax call from the page crashes the component rendering, it happens with select without async too

https://user-images.githubusercontent.com/8459781/178478586-2ecfda48-3e1f-4475-9086-e73a0047e4ed.mp4

https://user-images.githubusercontent.com/8459781/178478623-c4adcd8c-812c-474b-800e-5cc96b27bfdc.mp4

https://user-images.githubusercontent.com/8459781/178487661-47ce31ce-b01d-4c8c-a191-f127833e9bbc.mp4

[Krato]

Updates

Is not happening for me in Safari, but happening in Chrome.

[modrictin]

I can confirm weird bugs with x-select and model.defer. I don't have time to pinpoint the exact case but I noticed some weird behavior

[bpre]

There is a generally problem with select in Chrome.

Take a look at this very simple example:

https://user-images.githubusercontent.com/57385129/179421218-45506859-a2d9-4fe6-8b7e-851cb7e6c380.mov

[Krato]

Any update on this? Thanks!

[PH7-Jack]

@Krato @Tiagospem @modrictin @bpre I found the problem, the livewire as recreating the elements that only the alpine should manipulate to add/remove from the dom. It's now fixed, let me know if your problem still persists. Update to the latest release to get the fix.

[Tiagospem]

@PH7-Jack good job, all errors are fixed, thanks!