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>

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

TagsInput throws errors in console

Similar Threads

Similar Threads

Similar Threads