[entity_browser] Errors when using a modal/standalone Entity Browser, because modal-in-modal does not work

Just ran into this myself. Also 8.2.5.

I get

Call to a member function id() on null

Stemming from ajax.js in the browser console when clicking on the E button in CKEditor.

I cleared out the settings and re-enabled the modules.

I followed this guide:

https://www.webwash.net/manage-media-assets-drupal-8/

This time, it worked. I think my mistake was switching the selector from autocomplete to whatever the second option was... should still be handled more gracefully though IMO.

I ran into this as well, and what solved the issue for me was following the directions for the Create Entity Browser part (in the above mentioned guide). Specifically, setting the Display plugin to iFrame and in step 3 making sure "Auto open entity browser" is checked off.

I ran into this issue also.

Entity Browsers for Entity Embed can't use the Modal display plugin (modal inside a modal, which I think returns this ajax error).

This isn't specifically Entity Embed issues but there could possibly be a check of the entity browser's configuration to ensure the browser isn't set to modal and display a warning/error if selected?

Crossposting with #2845916: Embed module incompatible with advagg
@P44T Could you check out this advagg issue: #2833686: Issues with ajax commands / apply bugfix from core
The current advagg dev was patched and solved a pretty nasty JS caching bug.

The redirect issue noted above is as now fixed in a stable release of AdvAgg.

This id() on null issue though... patch attached to avoid/prevent that. Specifically only list compatible entity browsers in the the select box.

Test fail noted in comment #10 is not related to patch but already present in current 8.x-1.x dev branch when testing against core 8.4.x.

@NickWilde I think we need to reroll your patch.

I solved this problem by creating a new entity browser type and using an iframe instead of a modal one.

Patch from #9 still works in latest .dev version. We've tested it manually. It does NOT fix the problem itself but hides incompatible entity selection widgets in the embed profiles.

Is there a chance to fix the problem and make them compatible?

#2670016: [entity_browser] Entity Browser integration does not work with Modal displays is the same issue. We should mark one of them as duplicate and fix the key problem behind. Both offer valuable workarounds.

This bug still occurs on dev. The provided patch needs to be updated. We need to call $item->getDisplay() instead of $item->display:

        $browsers = array_map(
          function ($item) {
            /** @var \Drupal\entity_browser\EntityBrowserInterface $item */
            return $item->label();
          },
          array_filter(
            $browsers,
            function ($item) {
              /** @var \Drupal\entity_browser\EntityBrowserInterface $item */
              return $item->getDisplay() !== 'modal';
            }
          )
        );

On my side, the bug occurs because the entity browser is not displaying its form in the selection step in modal type. I couldn't get to understand the design of the module so I didn't dig further. Using Iframe type circumvents the bug.

re-rolled

Hi rpayanm,
just used your patch from #19 on my 8.5.4 installation with Entity Embed 8.x-1.x-dev and Entity Browser 8.x-1.5
It works, thanks!

The patch from #19 did not work for me. After applying the patch and clearing cache, I was still getting null returned with a modal window. Using an iFrame is a workaround but not ideal.

When debugging the code I found that
$form_state->getValue(['entity_browser', 'entities', 0])->id();
returns null, this is because the value of $form_state->getValue(['entity_browser', 'entities']) is an empty array.

@LiamPower I added a condition to check empty arrays.

@rpayanm

I added a condition to check empty arrays.

The AJAX request still doesn't work, but it shows different errors now:

Notice: Undefined index: entity_id in Drupal\entity_embed\Form\EntityEmbedDialog->validateSelectStep() (line 529 of entity_embed/src/Form/EntityEmbedDialog.php)

TypeError: Argument 1 passed to Drupal\Core\Form\FormState::setError() must be of the type array, null given, called in web/modules/contrib/entity_embed/src/Form/EntityEmbedDialog.php on line 559 in Drupal\Core\Form\FormState->setError() (line 1093 of web/core/lib/Drupal/Core/Form/FormState.php) #0 web/modules/contrib/entity_embed/src/Form/EntityEmbedDialog.php(559): Drupal\Core\Form\FormState->setError(NULL, Object(Drupal\Core\StringTranslation\TranslatableMarkup)) #1

FYI:
$form_state->hasValue(['entity_browser', 'entities']) is TRUE
(count($form_state->getValue(['entity_browser', 'entities'])) > 0) is FALSE

It seems that the problem is that the first branch of if is for the case when entity browser is enabled, and the second is for the case when the user presses the "Next" button (entity browser is not enabled). But the first branch never checks that the browser values are empty.
As a result, clicking "Select entities" validates form and executes submit callback (both incorrect).

Once again involves entity_browser; updated title accordingly.

With 32 followers, this is one of the issues in entity_embed that's impacting the most people. Bumping in priority.

#6:

Entity Browsers for Entity Embed can't use the Modal display plugin (modal inside a modal, which I think returns this ajax error).

#16 says that this is the same issue as #2670016: [entity_browser] Entity Browser integration does not work with Modal displays. This appears to be true.

entity_embed maintainer @slashrsm commented at #2670016-2: [entity_browser] Entity Browser integration does not work with Modal displays:

This will be very hard to fix since entity embed already operates in a modal. What about just filtering EBs using Modal display from the configuration dropdown?

… which happens to be exactly what #9 does.

Finally, @a-fro wrote at #2670016-17: [entity_browser] Entity Browser integration does not work with Modal displays:

@marcosano and I discussed this solution along with the patch at https://www.drupal.org/project/entity_embed/issues/2820188. Patch #6 above is interesting, but we're a bit concerned that it hides the issue from the site builder. Transparency seems better (you cannot select an entity browser with a modal rather than swapping it out on the fly), which the other patch provides.

Given that @marcoscano's expertise in the area of Media in D8, and the original advice of one of the maintainers, I think it's clear: we should just move forward with the patch here.

Besides, modal-in-modal is terrible UX anyway.

Turns out @dawehner opened a similar issue: #2904091: [entity_browser] Filter out incompatible entity browsers on the configuration form.

But he points out that not alone does the modal display not work, but neither does standalone. I merged his patch into this one.

+++ b/src/Plugin/EmbedType/Entity.php
@@ -150,19 +150,25 @@ class Entity extends EmbedTypeBase implements ContainerFactoryPluginInterface {
-          '#description' => $this->t('Entity browser to be used to select entities to be embedded. Note that not all display plugins from Entity Browser are compatible with Entity Embed. For example, the "iFrame" display is compatible, while the "Modal" display is not.'),

Also, lol, this shows that even in HEAD there's explicit documentation saying this doesn't work 🙈 So much pain could've been prevented by not just having this there as text…

@phenaproxima pointed out that there's one superfluous sentence. Removing that upon commit.