F
Filament2mo ago
Mark88

Generating slug from title example only working properly when adding debounce

I'm using this example code: https://filamentphp.com/docs/3.x/forms/advanced#generating-a-slug-from-a-title When I keep typing in the title field it cannot keep up, when I type something like this: This is a very long title, just a few more words to make it longer After a while the input is looking like this: This is a ry long tie, jus a w re worto makit longer When I add debounce or just add two TextInputs for the same property there is no problem and both inputs are updated accordingly. Am I missing something, is this a problem with Filament/Livewire?
2 Replies
Mark88
Mark882mo ago
This seems related with: https://discord.com/channels/883083792112300104/1207372102693290024 But when I create a new Livewire component doing something like this all is fine:
<?php

namespace App\Livewire;

use Illuminate\Support\Str;
use Livewire\Component;

class Test extends Component
{
public string $title = 'a';
public string $slug = 'a';

public function updatedTitle()
{
$this->slug = Str::slug($this->title);
}

public function render()
{
return view('livewire.test');
}
}
<?php

namespace App\Livewire;

use Illuminate\Support\Str;
use Livewire\Component;

class Test extends Component
{
public string $title = 'a';
public string $slug = 'a';

public function updatedTitle()
{
$this->slug = Str::slug($this->title);
}

public function render()
{
return view('livewire.test');
}
}
<div>
<input type="text" wire:model.live="title" class="border w-full p-1">
{{ $slug }}
</div>
<div>
<input type="text" wire:model.live="title" class="border w-full p-1">
{{ $slug }}
</div>
No missed keystrokes and the slug is updating as it should. When I place all data in an array the problem also exists in plain Livewire:
<?php

namespace App\Livewire;

use Illuminate\Support\Str;
use Livewire\Component;

class Test extends Component
{
public array $data = ['title' => 'a', 'slug' => 'a'];

public function updatedData()
{
$this->data['slug'] = Str::slug($this->data['title']);
}

public function render()
{
return view('livewire.test');
}
}
<?php

namespace App\Livewire;

use Illuminate\Support\Str;
use Livewire\Component;

class Test extends Component
{
public array $data = ['title' => 'a', 'slug' => 'a'];

public function updatedData()
{
$this->data['slug'] = Str::slug($this->data['title']);
}

public function render()
{
return view('livewire.test');
}
}
<div>
<input type="text" wire:model.live="data.title" class="border w-full p-1">
{{ $data['slug'] }}
</div>
<div>
<input type="text" wire:model.live="data.title" class="border w-full p-1">
{{ $data['slug'] }}
</div>
So it seems it is a Livewire issue.
Raziul Islam
Raziul Islam2mo ago
You should not use live for this case. Too many network requests is the reason. You can use blur for this case.