Use many time same extend custom field on page and display problem

[jechazelle]

Package

filament/filament

Package Version

v3.2.76

Laravel Version

v11.7

Livewire Version

v3.4.12

PHP Version

8.2

Problem description

hi, I tried to use many time the same custom field extend from RichEditor (class MentionsRichEditor extends RichEditor) and I have a problem with the display.

I tried with different state :

basic display:

MentionsRichEditor::make('content')
    ->mentionsItems(),

MentionsRichEditor::make('content2')
    ->mentionsItems(),

MentionsRichEditor::make('content3')
    ->mentionsItems(),

I see this:

tab display:

Tabs::make('Tabs')
  ->tabs([
      Tabs\Tab::make('Tab 1')
          ->schema([
              MentionsRichEditor::make('content')
                  ->mentionsItems(),
          ]),
      Tabs\Tab::make('Tab 2')
          ->schema([
              MentionsRichEditor::make('content2')
                  ->mentionsItems(),
          ]),
      Tabs\Tab::make('Tab 3')
          ->schema([
              MentionsRichEditor::make('content3')
                  ->mentionsItems(),
          ]),
  ])->activeTab(2)

Tab1:

Tab2:

Tab3:

Expected behavior

Nice display.

Steps to reproduce

1. Create a custom field

   php artisan make:form-field MentionsRichEditor

2. Extend the custom field

   
   <?php

namespace App\Forms\Components;

use Filament\Forms\Components\RichEditor;

class MentionsRichEditor extends RichEditor { protected string $view = 'forms.components.mentions-rich-editor';

protected array $mentionsItems = [];

public function mentionsItems(): static
{
    $this->mentionsItems = [
        [
            'key' => 'test',
            'link' => 'profil'
        ],
        [
            'key' => 'test2',
            'link' => 'profil2'
        ]
    ];

    return $this;
}

public function getMentionsItems(): array
{
    return $this->mentionsItems;
}

}

3. In the view, use rich editor

@include('filament-forms::components.rich-editor')

@assets

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tributejs/3.3.2/tribute.min.css" />

@endassets

4. use the custom field on resource, in tab many time:

Tabs::make('Tabs') ->tabs([ Tabs\Tab::make('Tab 1') ->schema([ MentionsRichEditor::make('content') ->mentionsItems(), ]), Tabs\Tab::make('Tab 2') ->schema([ MentionsRichEditor::make('content2') ->mentionsItems(), ]), Tabs\Tab::make('Tab 3') ->schema([ MentionsRichEditor::make('content3') ->mentionsItems(), ]), ])->activeTab(2)

### Reproduction repository

https://github.com/jechazelle/filament-custom-field

### Relevant log output

_No response_

[danharrin]

And this doesn't happen when you replace the custom rich editor with the standard rich editor?

[jechazelle]

Thx @danharrin for your answer!

With "normal" field, it's ok:

Tabs::make('Tabs')
  ->tabs([
      Tabs\Tab::make('Tab 1')
          ->schema([
              RichEditor::make('content'),
          ]),
      Tabs\Tab::make('Tab 2')
          ->schema([
              RichEditor::make('content2'),
          ]),
      Tabs\Tab::make('Tab 3')
          ->schema([
              RichEditor::make('content3'),
          ]),
  ])->activeTab(2)

It's when I extend the view:

@include('filament-forms::components.rich-editor')

[danharrin]

The @include needs to be at the first level of the component, it cannot be wrapped in a div as it will interfere with the field wrapper.

[aotearoait]

I have experienced the same issue with a custom tab. The livewire error is Uncaught Snapshot missing on Livewire component with id: this occurs when you have tabs with more than 3 tabs and with custom tabs. What is more unusual, if you have multiple tabs with custom livewire views, it only does this with the first one. After Save Before Save

[danharrin]

Make sure the nested Livewire components have unique keys

[aotearoait]

Make sure the nested Livewire components have unique keys

Yeah both have unique keys but still an issue, did you resolve your issue?

[aotearoait]

I think this is still an active issue. I have 2 tabs with custom components eg Livewire::make(Boundary::class) I have tested keeping both custom components empty apart from the wrapper with a key on each and it still throws a JS error livewire.js?id=770f7738:4599 Uncaught Component not found: UC8OPitFqAqnvvOBynlv So these are empty components and still throws this error. It then causes the save button and other actions to no longer work.

[danharrin]

I think its a completely unrelated issue that you should open separately with a separate reproduction repository