Filament•3mo ago

Custom field with HasAffixes trait

Trying to set up this custom field and want to add a prefix $ icon. I can't seem to get a prefix to work on this field and wondering what I'm doing wrong.

use Filament\Forms\Components\Field;
use Filament\Forms\Components\Concerns\HasAffixes;

class MathInput extends Field
{
    use HasAffixes;

    protected string $view = 'forms.components.math-input';

    protected function setUp(): void
    {
        parent::setUp();

        $this->live(onBlur: true)
            ->afterStateUpdated(function (?string $state, ?string $old) {
                if ($state != null) {
                    $updatedState = $this->performMathOperation($state);
                    $this->state($updatedState);
                }
            });
    }

    public function getPrefixIcon(): ?string
    {
        return  'heroicon-o-currency-dollar';
    }

use Filament\Forms\Components\Field;
use Filament\Forms\Components\Concerns\HasAffixes;

class MathInput extends Field
{
    use HasAffixes;

    protected string $view = 'forms.components.math-input';

    protected function setUp(): void
    {
        parent::setUp();

        $this->live(onBlur: true)
            ->afterStateUpdated(function (?string $state, ?string $old) {
                if ($state != null) {
                    $updatedState = $this->performMathOperation($state);
                    $this->state($updatedState);
                }
            });
    }

    public function getPrefixIcon(): ?string
    {
        return  'heroicon-o-currency-dollar';
    }

<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">

    <div x-data="{
    state: $wire.entangle('{{ $getStatePath() }}'),
    updateState() {
        this.$wire.set('{{ $getStatePath() }}', this.state);
    }
}">
        <x-filament::input.wrapper>
            <x-filament::input type="text" x-model="state" @blur="updateState" />
        </x-filament::input.wrapper>
    </div>
</x-dynamic-component>

<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">

    <div x-data="{
    state: $wire.entangle('{{ $getStatePath() }}'),
    updateState() {
        this.$wire.set('{{ $getStatePath() }}', this.state);
    }
}">
        <x-filament::input.wrapper>
            <x-filament::input type="text" x-model="state" @blur="updateState" />
        </x-filament::input.wrapper>
    </div>
</x-dynamic-component>

Solution:

You need to pass the prefix to the wrapper since you’re in a custom view. See https://github.com/filamentphp/filament/blob/3.x/packages/forms/resources/views/components/text-input.blade.php

GitHub

filament/packages/forms/resources/views/components/text-input.blade...

A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS. - filamentphp/filament

Jump to solution

6 Replies

Solution

awcodes•3mo ago

You need to pass the prefix to the wrapper since you’re in a custom view. See https://github.com/filamentphp/filament/blob/3.x/packages/forms/resources/views/components/text-input.blade.php

GitHub

filament/packages/forms/resources/views/components/text-input.blade...

A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS. - filamentphp/filament

Jon Mason•3mo ago

hmmm...when I do this:

    <x-filament::input.wrapper :prefix-icon="$prefixIcon">

            <x-filament::input type="text" x-model="state" @blur="updateState" />
        </x-filament::input.wrapper>

    <x-filament::input.wrapper :prefix-icon="$prefixIcon">

            <x-filament::input type="text" x-model="state" @blur="updateState" />
        </x-filament::input.wrapper>

I get the error: "str_contains(): Argument #1 ($haystack) must be of type string, Closure given"

awcodes•3mo ago

Did you define $prefixIcon = $getPrefixIcon() Or just pass in $getPrefixIcon()

Jon Mason•3mo ago

I want to define it in the component itself, but I'm evidently doing that wrong:

protected function setUp(): void
    {
        parent::setUp();

        $this->prefixIcon = 'heroicon-o-currency-dollar';

        $this->live(onBlur: true)
            ->afterStateUpdated(function (?string $state, ?string $old) {
                if ($state != null) {
                    $updatedState = $this->performMathOperation($state);
                    $this->state($updatedState);
                }
            });
    }

protected function setUp(): void
    {
        parent::setUp();

        $this->prefixIcon = 'heroicon-o-currency-dollar';

        $this->live(onBlur: true)
            ->afterStateUpdated(function (?string $state, ?string $old) {
                if ($state != null) {
                    $updatedState = $this->performMathOperation($state);
                    $this->state($updatedState);
                }
            });
    }

awcodes•3mo ago

Right, that is fine. But in your blade file the method is $getPrefixIcon(). In the link I sent it is being set at the top of the file.

Jon Mason•3mo ago

ahh ok...I get it now...that works, thanks!

Gaming

Programming

Custom field with HasAffixes trait