Filament•14mo ago

Create Slug Automatically on Text Input Not Working Properly

Here I create a slug automatically based on name input. I use the same code as the docs https://filamentphp.com/docs/3.x/forms/advanced#generating-a-slug-from-a-title From the video I attached, you can see that whenever slug is updated it got the name field somehow got reset. I'm not sure if there's a settings I should do because in version 2 using reactive, it was working properly. I'm trying to write Spongebob on the video. Thank you for all the help.

       Forms\Components\TextInput::make('name')
                    ->live()
                    ->afterStateUpdated(fn (Set $set, ?string $state) => $set('slug', Str::slug($state)))
                    ->required()
                    ->maxLength(255),
                Forms\Components\TextInput::make('slug')
                    ->required()
                    ->maxLength(255),

       Forms\Components\TextInput::make('name')
                    ->live()
                    ->afterStateUpdated(fn (Set $set, ?string $state) => $set('slug', Str::slug($state)))
                    ->required()
                    ->maxLength(255),
                Forms\Components\TextInput::make('slug')
                    ->required()
                    ->maxLength(255),

Advanced forms - Form Builder - Filament

12 Replies

awcodes•14mo ago

You need to debounce or onBlur in the live() modifier.

Novi•13mo ago

Just ran into the same issue. Thanks for the fix! Shouldn't there also be a debounce in the live() in the code in the docs at that section as well then? Because as is, it is not usable. And I'm not even sure this is a great solution. Even with a debounce it is possible to loose letters.

Saade•13mo ago

looks like slow requests, but for slugs, i prefer to ->live(onBlur: true) and not mess with debouncing the slug field will only be updated after the blur event of the name field

Novi•13mo ago

That's what I use right now and that's fine for this usecase. Maybe that should be part of the code in the docs then.

@nasilemak•12mo ago

It seems that the prefix is not appended to the input field's value. Am I missing something?

TextInput::make('link')
    ->url()
    ->prefix('https://')
    ->required()
    ->maxLength(255),

TextInput::make('link')
    ->url()
    ->prefix('https://')
    ->required()
    ->maxLength(255),

I need to manually add the https:// protocol

toeknee•12mo ago

For a url field you will always need to add a valid http:// or https:// url.... If you don't just write you own rule to validate a url without http/https

Saade•12mo ago

prefix is just a UI thing, it does not affect the state of the component. you need to dehydrateStateUsing and prefix manually the state if you want

@nasilemak•12mo ago

Is it possible to set the text size for a TextColumn's description?

TextColumn::make('title')
    ->description()

TextColumn::make('title')
    ->description()

DrByte•12mo ago

Do you mean like this? https://filamentphp.com/docs/3.x/tables/columns/text#customizing-the-text-size

Text column - Table Builder - Filament

@nasilemak•12mo ago

I tried that but it only changes the text size of the main text, not the description.

                Tables\Columns\TextColumn::make('customer.name')
                    ->description(fn (Booking $record): string => $record->customer->address)
                    ->size(Tables\Columns\TextColumn\TextColumnSize::ExtraSmall)
                    ->searchable(),

                Tables\Columns\TextColumn::make('customer.name')
                    ->description(fn (Booking $record): string => $record->customer->address)
                    ->size(Tables\Columns\TextColumn\TextColumnSize::ExtraSmall)
                    ->searchable(),

DrByte•12mo ago

Oh! My apologies. I misread that. 🤦‍♂️ I think you can do that by returning a new HtmlString('<large>' . $record->customer->address . '</large>') (or maybe <p class="text-sm">, etc)

DrByte•12mo ago

Or, you could skip the description and add the column as a Stacked entry. An example is in the Filament Demo app: https://github.com/filamentphp/demo/blob/964d38a387a2e31bde366cccbf09fafb7e38d68a/app/Filament/Resources/Blog/AuthorResource.php#L56-L74

GitHub

demo/app/Filament/Resources/Blog/AuthorResource.php at 964d38a387a2...

Source code for the demo.filamentphp.com website. Contribute to filamentphp/demo development by creating an account on GitHub.

Gaming

Programming

Create Slug Automatically on Text Input Not Working Properly