Filament•12mo ago

TagsInput throws errors in console

Hi there. This is my first post, hopefully I respected all the rules. I apologize if not. The pseudo code below throws some nasty javascript console errors (see screenshot) when using TagsInput, while other , similar, solutions do not.

class CustomForm extends Component implements Forms\Contracts\HasForms
{

    public $resources = [
        'screens' => [],
        'files' => [],
        'filenames' => [],
        'roles' => [],
    ];

                
    protected function getFormSchema(): array
    {
        return [
        
            ...
            
            /* This gives errors */
            TagsInput::make('resources.screens')
                ->label('Screens'),

            /* Alternative solutions like this seem to work fine */
            Repeater::make('resources.screens')
                ->simple(
                    TextInput::make('screen')
                    ->required(),
                    )->addActionLabel('Add Screen'),
                    
            ...
            
        ];
    }
    
    #[On('edit_activity')]
    public function createActivity($context)
    {
        $this->task->resources = [
            'screens' => [],
            'files' => [],
            'filenames' => [],
            'roles' => [],
        ];
    }
    
}    
// TEMPLATE
<form wire:submit.prevent="save">
    {{ $this->form }}
</form>

class CustomForm extends Component implements Forms\Contracts\HasForms
{

    public $resources = [
        'screens' => [],
        'files' => [],
        'filenames' => [],
        'roles' => [],
    ];

                
    protected function getFormSchema(): array
    {
        return [
        
            ...
            
            /* This gives errors */
            TagsInput::make('resources.screens')
                ->label('Screens'),

            /* Alternative solutions like this seem to work fine */
            Repeater::make('resources.screens')
                ->simple(
                    TextInput::make('screen')
                    ->required(),
                    )->addActionLabel('Add Screen'),
                    
            ...
            
        ];
    }
    
    #[On('edit_activity')]
    public function createActivity($context)
    {
        $this->task->resources = [
            'screens' => [],
            'files' => [],
            'filenames' => [],
            'roles' => [],
        ];
    }
    
}    
// TEMPLATE
<form wire:submit.prevent="save">
    {{ $this->form }}
</form>

Errors which are repeated twice for each component but only at load time, not at update (see screenshot for more information): Uncaught ReferenceError: input is not defined Uncaught ReferenceError: state is not defined Cannot convert undefined or null to object

1 Reply

LeandroFerreira•12mo ago

Please follow this section https://filamentphp.com/docs/3.x/forms/adding-a-form-to-a-livewire-component#adding-the-form You should use InteractsWithForms, create a mount method, define the->statePath('data'), etc

Adding a form to a Livewire component - Form Builder - Filament

Gaming

Programming

TagsInput throws errors in console