F
Filament•5mo ago
Jon Mason

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
awcodes•5mo 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
Jon MasonOP•5mo 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
awcodes•5mo ago
Did you define $prefixIcon = $getPrefixIcon() Or just pass in $getPrefixIcon()
Jon Mason
Jon MasonOP•5mo 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
awcodes•5mo 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
Jon MasonOP•5mo ago
ahh ok...I get it now...that works, thanks!

Did you find this page helpful?