Update field state from alpine

Is there a way of setting the wire state from alpine?

E.g here the state remains the one step behind the last letter is capital.

Forms\Components\TextInput::make('group')
    ->extraAlpineAttributes([
        'x-on:keyup' => <<<'JS'
            $event.target.value = $event.target.value.toLowerCase()
        JS
    ])
    ->rules(['lowercase'])

    // Test code to show what's happening
    ->helperText(fn ($state) => $state)
    ->reactive()

Forms\Components\TextInput::make('group')
    ->extraAlpineAttributes([
        'x-on:keyup' => <<<'JS'
            $event.target.value = $event.target.value.toLowerCase()
        JS
    ])
    ->rules(['lowercase'])

    // Test code to show what's happening
    ->helperText(fn ($state) => $state)
    ->reactive()

I know I can do all this easily with

formatStateUsing

formatStateUsing

but I need it to be instant

Solution

Cheers yeah that work

->extraAlpineAttributes(fn (Forms\Components\TextInput $component): array => [
    'x-on:keyup' => <<<JS
        \$event.target.value = \$event.target.value.toLowerCase();
        \$wire.\$set('{$component->getStatePath(true)}', \$event.target.value)
    JS
])

->extraAlpineAttributes(fn (Forms\Components\TextInput $component): array => [
    'x-on:keyup' => <<<JS
        \$event.target.value = \$event.target.value.toLowerCase();
        \$wire.\$set('{$component->getStatePath(true)}', \$event.target.value)
    JS
])

Jump to solution

Filament•3y ago•

4 replies

howdu

Update field state from alpine

Is there a way of setting the wire state from alpine?

E.g here the state remains the one step behind the last letter is capital.

Forms\Components\TextInput::make('group')
    ->extraAlpineAttributes([
        'x-on:keyup' => <<<'JS'
            $event.target.value = $event.target.value.toLowerCase()
        JS
    ])
    ->rules(['lowercase'])

    // Test code to show what's happening
    ->helperText(fn ($state) => $state)
    ->reactive()

Forms\Components\TextInput::make('group')
    ->extraAlpineAttributes([
        'x-on:keyup' => <<<'JS'
            $event.target.value = $event.target.value.toLowerCase()
        JS
    ])
    ->rules(['lowercase'])

    // Test code to show what's happening
    ->helperText(fn ($state) => $state)
    ->reactive()

I know I can do all this easily with

formatStateUsing

formatStateUsing

but I need it to be instant

Solution

Cheers yeah that work

->extraAlpineAttributes(fn (Forms\Components\TextInput $component): array => [
    'x-on:keyup' => <<<JS
        \$event.target.value = \$event.target.value.toLowerCase();
        \$wire.\$set('{$component->getStatePath(true)}', \$event.target.value)
    JS
])

->extraAlpineAttributes(fn (Forms\Components\TextInput $component): array => [
    'x-on:keyup' => <<<JS
        \$event.target.value = \$event.target.value.toLowerCase();
        \$wire.\$set('{$component->getStatePath(true)}', \$event.target.value)
    JS
])

Jump to solution

Update field state from alpine

Similar Threads

Update field state from alpine

Similar Threads

Similar Threads

Similar Threads