Can't render correctly filament form in a Livewire component | Filament | Page 1

molten mauve Dec 10, 2025, 4:47 PM

#

Filament form rendering problems in custom Livewire component outside admin panel

final class MarkdownTextAnswer extends Component implements HasActions, HasSchemas
{
    use InteractsWithActions;
    use InteractsWithSchemas;

    #[Modelable]
    public string $content = '';

    public ?array $data = [];

    public int $questionId;

    public bool $disabled = false;

    public function mount(int $questionId, ?string $existingAnswer = null, bool $disabled = false): void
    {
        $this->questionId = $questionId;
        $this->disabled = $disabled;
        $this->content = $existingAnswer ?? '';

        $this->form->fill([
            'content' => $this->content,
        ]);
    }

    public function updated(string $property): void
    {
        // When the form data is updated, sync it back to the content property
        if ($property === 'data.content') {
            $this->content = $this->data['content'] ?? '';
        }
    }


    public function form(Schema $schema): Schema
    {
        return $schema
            ->components([
                MarkdownEditor::make('content')
                    ->label('')
                    ->toolbarButtons([
                        ['bold', 'italic', 'strike', 'link'],
                        ['heading'],
                        ['blockquote', 'bulletList', 'orderedList'],
                        ['table'],
                        ['undo', 'redo'],
                    ])
                    ->disabled($this->disabled)
                    ->live(onBlur: true),
            ])
            ->statePath('data');
    }

    public function render(): \Illuminate\Contracts\View\Factory|\Illuminate\Contracts\View\View
    {
        return view('livewire.courses.quizzes.markdown-text-answer');
    }
}
// blade
<div>
    <form wire:submit="create">
        {{ $this->form }}

        <button type="submit">
            Submit
        </button>
    </form>

    <x-filament-actions::modals />
</div>