Filament•4mo ago

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?

Advanced forms - Form Builder - Filament

2 Replies

Mark88•4mo 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•4mo ago

You should not use live for this case. Too many network requests is the reason. You can use blur for this case.

Gaming

Programming

Generating slug from title example only working properly when adding debounce