Sending a form when pressing enter

I have this form:

    protected function promptForm(Form $form): Form
    {
        return $form
            ->schema([
                FilamentForms\Select::make('targetBot')
                ->label('Bots available')
                ->searchable()
                ->options(Prompt::all()->pluck('name', 'id'))
                ->default(Prompt::where('is_active', true)->pluck('name', 'id')),
                FilamentForms\TextInput::make('prompt')
                ->label('Start Conversation')
                ->autofocus()
                ->autocomplete(false),
            ]);
    }

    protected function promptForm(Form $form): Form
    {
        return $form
            ->schema([
                FilamentForms\Select::make('targetBot')
                ->label('Bots available')
                ->searchable()
                ->options(Prompt::all()->pluck('name', 'id'))
                ->default(Prompt::where('is_active', true)->pluck('name', 'id')),
                FilamentForms\TextInput::make('prompt')
                ->label('Start Conversation')
                ->autofocus()
                ->autocomplete(false),
            ]);
    }

If I remove the Select component it works as intended, that is, it will send the form when I press enter while focused on the TextInput. But if the Select is present it does nothing. I do not have any validation going on that I am aware off... Here is my blade:

<div class="mx-auto p-4 sm:p-6 lg:p-8 grid grid-cols-5 gap-4">
    <div class="col-span-1">
        {{ $this->conversationsList }}
    </div>
    @if ($this->hasActivePrompt)
    <div class="col-span-4">
        <form wire:submit="sendPrompt">
            @csrf
            {{ $this->promptForm }}
        </form>
        <div wire:loading>
            Loading...
        </div>
    </div>
    @else
    <div class="col-span-4">
        No active prompt found.
    </div>
    @endif
</div>

<div class="mx-auto p-4 sm:p-6 lg:p-8 grid grid-cols-5 gap-4">
    <div class="col-span-1">
        {{ $this->conversationsList }}
    </div>
    @if ($this->hasActivePrompt)
    <div class="col-span-4">
        <form wire:submit="sendPrompt">
            @csrf
            {{ $this->promptForm }}
        </form>
        <div wire:loading>
            Loading...
        </div>
    </div>
    @else
    <div class="col-span-4">
        No active prompt found.
    </div>
    @endif
</div>

Solution:

Just in case someone is looking for an answer to this, the only way I found to do that is to create a hidden submit button. ```php protected function promptForm(Form $form): Form { return $form...

Jump to solution

1 Reply

Solution

ElCoco•10mo ago

Just in case someone is looking for an answer to this, the only way I found to do that is to create a hidden submit button.

protected function promptForm(Form $form): Form
{
    return $form
        ->schema([
            FilamentForms\Grid::make()
            ->schema([
                FilamentForms\TextInput::make('prompt')
                ->label('Start Conversation')
                ->autofocus()
                ->autocomplete(false)
                ->columnSpan(11),
                FilamentForms\Select::make('systemPrompt')
                ->label('Bots available')
                ->searchable()
                ->options(Prompt::all()->pluck('name', 'id'))
                ->default(Prompt::where('is_default', true)->pluck('id')->first())
                ->columnSpan(4),
                FilamentForms\TextInput::make('submitBtn')
                ->hiddenLabel()
                ->type('submit')
                ->extraAttributes(['class' => 'invisible'])
                ->columnSpan(1)
            ])
            ->columns(16)
        ]);
}

protected function promptForm(Form $form): Form
{
    return $form
        ->schema([
            FilamentForms\Grid::make()
            ->schema([
                FilamentForms\TextInput::make('prompt')
                ->label('Start Conversation')
                ->autofocus()
                ->autocomplete(false)
                ->columnSpan(11),
                FilamentForms\Select::make('systemPrompt')
                ->label('Bots available')
                ->searchable()
                ->options(Prompt::all()->pluck('name', 'id'))
                ->default(Prompt::where('is_default', true)->pluck('id')->first())
                ->columnSpan(4),
                FilamentForms\TextInput::make('submitBtn')
                ->hiddenLabel()
                ->type('submit')
                ->extraAttributes(['class' => 'invisible'])
                ->columnSpan(1)
            ])
            ->columns(16)
        ]);
}

I guess there is a better way to do this but oh well...

Gaming

Programming

Sending a form when pressing enter