F
Filament•2w ago
Zamion101

Unexpected behaviour of Form Builder

I am trying to create a Form Builder for my project. I have created the Builder and a Block named Field which contains a Schema. 
Forms\Components\Builder::make('schema')
  ->label('Form Fields')
  ->columnSpan('full')
  // show a preview instead of the full sub‑form
  ->blockPreviews(areInteractive: true)
  ->addActionLabel('Add field')
  ->blockNumbers(false)
  ->addActionAlignment(Alignment::Start)
  ->blocks([
      Block::make('field')
          ->label('Field')
          ->schema([
              TextInput::make('label')
                  ->label('Label')
                  ->required(),

              TextInput::make('key')
                  ->label('Key')
                  ->helperText('Unique key (database column name).')
                  ->required(),

              Select::make('type')
                  ->label('Field type')
                  ->options([
                      'text' => 'Text input',
                      'email' => 'Email',
                      'phone' => 'Phone Number',
                      'textarea' => 'Textarea',
                      'number' => 'Number',
                      'select' => 'Select',
                      'checkbox' => 'Checkbox',
                      'toggle' => 'Toggle',
                      'date' => 'Date',
                      'yes-no' => 'Yes/No',
                      'address' => 'Address',
                  ])
                  ->required(),
              TextInput::make('placeholder')
                  ->label('Placeholder')
                  ->visible(fn($get) => !in_array($get('type'), ['checkbox', 'toggle'])),

              KeyValue::make('options')
                  ->label('Options')
                  ->helperText('Only for select / checkbox / radio fields')
                  ->keyLabel('Option value')
                  ->valueLabel('Option label')
                  ->visible(fn($get) => $get('type') === 'select'),

              Toggle::make('required')
                  ->label('Required'),
          ])
          ->preview('forms.builder.field-preview')
          ->columns(),
  ])
  ->addBetweenAction(function (Action $action) {
      return $action->slideOver()->modalWidth(Width::Large);
  })
  ->addAction(function (Action $action) {
      return $action->slideOver()->modalWidth(Width::Large);
  })
  ->editAction(function (Action $action) {
      return $action->slideOver()->modalWidth(Width::Large);
  })
Forms\Components\Builder::make('schema')
  ->label('Form Fields')
  ->columnSpan('full')
  // show a preview instead of the full sub‑form
  ->blockPreviews(areInteractive: true)
  ->addActionLabel('Add field')
  ->blockNumbers(false)
  ->addActionAlignment(Alignment::Start)
  ->blocks([
      Block::make('field')
          ->label('Field')
          ->schema([
              TextInput::make('label')
                  ->label('Label')
                  ->required(),

              TextInput::make('key')
                  ->label('Key')
                  ->helperText('Unique key (database column name).')
                  ->required(),

              Select::make('type')
                  ->label('Field type')
                  ->options([
                      'text' => 'Text input',
                      'email' => 'Email',
                      'phone' => 'Phone Number',
                      'textarea' => 'Textarea',
                      'number' => 'Number',
                      'select' => 'Select',
                      'checkbox' => 'Checkbox',
                      'toggle' => 'Toggle',
                      'date' => 'Date',
                      'yes-no' => 'Yes/No',
                      'address' => 'Address',
                  ])
                  ->required(),
              TextInput::make('placeholder')
                  ->label('Placeholder')
                  ->visible(fn($get) => !in_array($get('type'), ['checkbox', 'toggle'])),

              KeyValue::make('options')
                  ->label('Options')
                  ->helperText('Only for select / checkbox / radio fields')
                  ->keyLabel('Option value')
                  ->valueLabel('Option label')
                  ->visible(fn($get) => $get('type') === 'select'),

              Toggle::make('required')
                  ->label('Required'),
          ])
          ->preview('forms.builder.field-preview')
          ->columns(),
  ])
  ->addBetweenAction(function (Action $action) {
      return $action->slideOver()->modalWidth(Width::Large);
  })
  ->addAction(function (Action $action) {
      return $action->slideOver()->modalWidth(Width::Large);
  })
  ->editAction(function (Action $action) {
      return $action->slideOver()->modalWidth(Width::Large);
  })
Problem is that Builder just confuses so hard when slideOver is used as you ca see in the video as well. What am I doing wrong? Note: forms.builder.field-preview is an empty blade file.
10 Replies
Zamion101
Zamion101OP•2w ago
Converted to MP4
Dennis Koch
Dennis Koch•2w ago
It only happens with SlideOver? 🤔
Zamion101
Zamion101OP•2w ago
No actually it also happens with ->modal() Maybe ->blockPreviews are not fully tested or there is a bug? Because when I was testing without blockPreviews it justed worked as intended Again I am just making assumptions but livewire/update does return sync-modals-* in dispatch. It may also be the culprit
Azad Furkan ŞAKAR
Azad Furkan ŞAKAR•2w ago
I had started working on something similar before, but I haven't finished it yet. If you want to check it out, the repo is here: https://github.com/afsakar/filament-form-maker
GitHub
GitHub - afsakar/filament-form-maker: Form Maker for FilamentPHP
Form Maker for FilamentPHP. Contribute to afsakar/filament-form-maker development by creating an account on GitHub.
Zamion101
Zamion101OP•2w ago
It looks interesting, I will be checking it but may need lot's of changes on my end to satisfy my project requirements. I tried without ->blockPreviews(areInteractive: true) which does show in the Builder and there is no problem with it. It works as expected but whenever I enable blockPreviews and want to use Modal/SlideOver it becomes unstable and I get the problem I have attached as video. So it looks like something does not play nicely with blockPreviews and Modal/Slideover. This should be investigated further but I am not good with the inner workings of Filament so I am unable to help more unless something I can do from my project and provide more insight on the problem. Even if it's not a helpful response, I will be happy to get some response on this issue. Thank you
Dennis Koch
Dennis Koch•2w ago
Please open an issue on GitHub so we can investigate this and add the info from this thread. Thanks!
Zamion101
Zamion101OP•2w ago
@Dennis Koch Should I open under filament/filament or filament/forms?
Dennis Koch
Dennis Koch•2w ago
The first one. The second one is just a split of the monorepo
Zamion101
Zamion101OP•2w ago
Oh okay. Thank you I will be opening in a moment.
Zamion101
Zamion101OP•2w ago
@Dennis Koch Created the issue. Also while I was creating the issue repo I have found another unexpected behavior which makes me think this is some kind of de-sync between modal and the form.

Did you find this page helpful?