TextInput afterStateUpdated() reactive weird behavior
I have copied a well-functional code from my V2 app. But I have this weird behavior in V3 The text goes back and forth. The code works really well in V2. I have tested it also in a freshly installed Laravel and Filament V3.
31 Replies
what about this?
It can ease, the problem when you hit the backspace to delete text, the text won't delete, it keeps reapearing
with
->live(debounce: 500) ?in both, yes even with debounce.
fresh install? Filament version?
What is your browser?
Yes fresh install. Windows 10, Laragon, I tested it in both Microsoft Edge and Chrome same results.
I let my friend to test it also in his workstation, same result.
share the whole code you are trying please
I updated my post
?
<?php
namespace App\Filament\Resources;
use Filament\Forms;
use Filament\Tables;
use App\Models\Drawer;
use Filament\Forms\Form;
use Filament\Tables\Table;
use Illuminate\Support\Str;
use Filament\Resources\Resource;
use Illuminate\Database\Eloquent\Builder;
use App\Filament\Resources\DrawerResource\Pages;
use Illuminate\Database\Eloquent\SoftDeletingScope;
use App\Filament\Resources\DrawerResource\RelationManagers;
class DrawerResource extends Resource
{
protected static ?string $model = Drawer::class;
protected static ?string $navigationIcon = 'heroicon-o-rectangle-stack';
public static function form(Form $form): Form
{
return $form
->schema([
Forms\Components\TextInput::make('name')->reactive()
->afterStateUpdated(function ($set, $state) {
$set('slug', Str::slug($state));
}),
Forms\Components\TextInput::make('slug')->required()->disabled(),
]);
}
public static function table(Table $table): Table
{
return $table
->columns([
Tables\Columns\TextColumn::make('name')
->searchable(),
Tables\Columns\TextColumn::make('slug')
->searchable(),
Tables\Columns\TextColumn::make('office_id')
->numeric()
->sortable(),
Tables\Columns\TextColumn::make('created_at')
->dateTime()
->sortable()
->toggleable(isToggledHiddenByDefault: true),
Tables\Columns\TextColumn::make('updated_at')
->dateTime()
->sortable()
->toggleable(isToggledHiddenByDefault: true),
])
->filters([
//
])
->actions([
Tables\Actions\EditAction::make(),
])
->bulkActions([
Tables\Actions\BulkActionGroup::make([
Tables\Actions\DeleteBulkAction::make(),
]),
])
->emptyStateActions([
Tables\Actions\CreateAction::make(),
]);
}
public static function getRelations(): array { return [ // ]; }
public static function getPages(): array { return [ 'index' => Pages\ListDrawers::route('/'), 'create' => Pages\CreateDrawer::route('/create'), 'edit' => Pages\EditDrawer::route('/{record}/edit'), ]; }
} I can't seem to update it longer text I just segemented it but here it is
public static function getRelations(): array { return [ // ]; }
public static function getPages(): array { return [ 'index' => Pages\ListDrawers::route('/'), 'create' => Pages\CreateDrawer::route('/create'), 'edit' => Pages\EditDrawer::route('/{record}/edit'), ]; }
} I can't seem to update it longer text I just segemented it but here it is
where is debounce?
I just undo it, sorry
public static function form(Form $form): Form
{
return $form
->schema([
Forms\Components\TextInput::make('name')
->live(debounce: 500)
->afterStateUpdated(function (\Filament\Forms\Set $set, ?string $state) {
$set('slug', Str::slug($state));
}),
Forms\Components\TextInput::make('slug')
->disabled()
]);
}
it goes like this
the same Filament version here and it is working.. there is no issues for me
I have my friend tested it also fresh install and we have both same results
can you share this project on github?
okay sure let me make repo
Okay I have my second friend test it on MAC, and it has no problem me and my first friend both on windows
GitHub
GitHub - PLGUPICTO/archive_filamentv3
Contribute to PLGUPICTO/archive_filamentv3 development by creating an account on GitHub.
@Leandro Ferreira
@Leandro Ferreira I think we got it, I have my team tested it and it seems some pc with low specs having the problem. Others pc with good specs no problem.
So we can't really use filament well with low-end pc 😦
Make it lazy and slug disabled from custom input
Exactly
People really shouldn't be using live/reactive so much when theres a lot of typing 🙂
This is our first attempt with filament so we don't know yet the limitations. Coming from vue inertia
Yes but for this implementation its not desirable to have it lazy(). Because lazy only sets when you move away from the field.
If these are the only 2 fields you want to use you might want to look into field lifecycles and mutating data before creating.
Yeah, I think we go this way
I disagree, you don't actually need to see or adjust the slug. The slug is the slug, so when clicking it to type it, it will have updated.
Btw, I don't have this problem in V2, I just copy the code from there
working here with debounce 🤷♂️
CanI mention you to the other help post I made?
debounce(600) fixed this for me