Impossible to load JS attach on custom field on modal (relation manager) but work on resource page about filament HOT 4 CLOSED

Someone here seems to have this problem too https://laracasts.com/discuss/channels/filament/filament-custom-rich-editor-javascript-not-loading-in-modal-relation-manager?page=1&replyId=935999

I found the problem again, but not a solution.

a little help would be appreciated 🙂

from filament.

Would it help to use AlpineJS for initialisation? I had some load issues,possibly due to server-side rendering with JS in a livewire component/blade template. I ended up fixing it with something like:

<div x-data="my_component">
  <!-- All of your component stuff in here -->
</div>

@script 
Alpine.data("my_component", () => {
    return {
    
        init() {
          //  All of your logic in here, sans the window.addEventListener wrapper
        }
    }
}
@endscript 

My understanding is that Alpine.js calls the 'init()' function after the related div with the x-data is rendered on the browser, so I think it might make everything happen in the right order. Please let me know if I'm wrong...

from filament.

I don't think @assets is a thing that we have added support for? Have you tried the Livewire @script directive as above?

Also, I would really appreciate it if you did not open more issues for questions about building custom fields, these aren't Filament bugs and belong in Discussions or Discord. If you do find a Filament bug then of course an issue is fine

from filament.

@BatthewZ thx for this way, the JS is execute but I have always the same problem : I get only one ID on two fields from modal. I would like to execute the JS on each custom field. But in my console.log, I have only the same last ID...

@danharrin I understand, I thought it was a bug because on a resource it's perfect, on modal I can get ID on each custom field. I tried @assets because I search a way to execute the JS on each field from modal... :-)

Modal:

MentionsRichEditor::make('one_sentence')
    ->id('one_sentence')
    ->mentionsItems($form)
    ->fileAttachmentsDisk('media')
    ->label('One sentence'),

MentionsRichEditor::make('description')
    ->id('description')
    ->mentionsItems($form)
    ->fileAttachmentsDisk('media')
    ->label('Description'),

View:

<div x-data="my_component">
    @include('filament-forms::components.rich-editor')
</div>
    
@assets
<script src="{{ url('js/libs/Tribute/Tribute.min.js') }}"></script>

<link href="{{ url('css/libs/Tribute/Tribute.min.css') }}" rel="stylesheet">
@endassets

@script
<script>
    Alpine.data("my_component", () => {
        return {

            init() {
                //  All of your logic in here, sans the window.addEventListener wrapper
                const id = '{{ $getId() }}';

                console.log(id);
            }
        }
    });
</script>
@endscript

Console.log:

from filament.