Using collection form type of elfinder form type not working well

[migmolrod]

I'm using EasyAdminBundle (1.17.12) and ElFinderBundle (8.0.1) and have two problems when trying to use a collection of elfinder form type.

First of all, when I click "add new item", the "delete this item" link is not showing. But it does if I configure it as a collection of text fields instead of a collection of elfinder form fields. So I guess that's because of how the elfinder form widget is designed, somehow ignoring that extra link. Actually I may open a different but related issue with some recommendations about how I see the field widget should be drawn, addressing this and another issues it currently has IMO (text input serving as 'button' to pop up the ElFinder window instead of a separate button seems a bit of a problem for me).

The second problem is a little trickier: it looks like the embedded Javascript is not working in some specific cases, according to my trial and error (will explain it now in detail)

This is how the field is configured in one of my easyadmin yml files (I use one yml file for each entity)

- { property: 'otherImages', type: 'collection', type_options: { allow_add: true, allow_delete: true, entry_type: 'FM\ElfinderBundle\Form\Type\ElFinderType', entry_options: { instance: 'thumbnail', enable: true } } }

So let's say I create a new instance of the entity that has the collection, we'll call it the Article entity. The collection field itself starts as "Empty". I click the link to add a new item to the collection and the elfinder form field appears. But if I click the text field, nothing happens. The ElFinder window doesn't pop up.
Just to test it out, I manually typed in random text and clicked "Save changes" button.
But then I tried to "Edit" this Article. And, to my surprise, when I click the existent elfinder form field inside the collection, it opens the window. Again, if I click the link to add a new item to the collection, that item doesn't work.

Tried a couple more web browsers with same result, just to check out if it was caused by how my browser (Vivaldi) handles Javascript.

My conclusion (I may be wrong): the Javascript attached to the elfinder form widget is being ignored if the elfinder form field has been dynamically generated within the collection but it works well when the elfinder form field does already exist at page load.

Any ideas about how to solve this couple of troubles? I can think about a workaround with jQuery, applying an equivalent script globally to all $("[data-type='elfinder-input-field']") selectors in my main JS file (so it's loaded at the start of each request), hardcoding (ugh) the instance then "disabling" the elfinder form so the included JS is not printed.
It should work since I tried a collection of datepickers and they all work nice. But not sure at all if there is a better way or if I'm just missing some existing option to enable this. Nevermind this last part. I tried it properly and it doesn't work.

[helios-ag]

Hi @migmolrod, thanks for reporting this issue.
I have added ability to delegate events for dynamically created elements. It resides in dev-master branch of this bundle (cf462b0).
Can you check it and return to me?

[migmolrod]

Yes, that should work, can't test it now tho. Maybe I can check it later.

I ended up making my own solution delegating events just like you did but with jQuery instead (since elfinder directly depends on jQuery, so...)
But I didn't share it because my solution also includes more changes fixing the lack of "delete this item" link in collections. And also made it dependant on bootstrap (using "Input Groups" https://getbootstrap.com/docs/3.3/components/#input-groups-buttons-multiple) to look more integrated with the rest of my backend and bootstrap.
I got something like this (sorry it's half in Spanish XD):

[helios-ag]

I ended up making my own solution delegating events just like you did but with jQuery instead (since elfinder directly depends on jQuery, so...)
It's fine, and sometime ago elfinder form type depended on jquery, but i decided to move it to plain js, because pages where devepelopers use it, could contain different version of jquery or it could plain html page.

Anyway great work on spotting this.

[e1sep0]

Hello, in Easyadmin it doesn`t work((

In Easyadmin:

return 
[
Field::new('cover', 'Обложка')->setFormType(ElFinderType::class)
                ->setFormTypeOptions(
                    [
                        'instance' => 'image_form',
                        'attr' => ['class' => 'col-6'],
                    ]
                )
                ->hideOnIndex(),   // This ELFinder works perfectly
            CollectionField::new('photos', 'Фотографии')
            ->setEntryType(PhotoType::class)
];

PhotoType:

public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('path', ElFinderType::class, [
                'instance' => 'image_form',
                'enable' => true
            ])
            ->add('translations', TranslationsType::class, [
                'fields' => [
                    'description' => [
                        'field_type' => CKEditorType::class,
                        'label' => 'Описание',
                    ],
                ],
            ]);
    }

Neither ELFinder, nor CKEditor in PhotoType doesn`t work(

[e1sep0]

But in edit mode, if i add one file, it works