Modal auto-open conflicts with AJAX

Created on 2 March 2017, over 7 years ago
Updated 21 May 2024, about 1 month ago

Problem/Motivation

When displaying a button for a modal entity browser with auto open enabled, any future AJAX-Interaction on the page will cause the browser to pop up (again). I've encountered this problem mostly with Inline Entity Form Complex widgets, but assume it also happens in other setups.

This bug makes IEF Complex widgets unusable within Panels IPE, or when using multiple auto open widgets in the same form, or multi value fields with "Add more" - basically when using any AJAX interactions on the form.
While the potential conflicts with multiple fields using auto open are mentioned when configuring the entity browser, it cannot always be avoided and should definitely not occur on every single AJAX interaction.

This is a side effect of the commit in #2778305-19: Open entity browser with one click from Entity Browser IEF widget , but I figured this should be its own issue as the code is already committed and discussion in that issue focusses on different aspects.

Replication steps:

Create an Entity Browser with the Modal display and auto open enabled
Use the Entity Browser on a multiple-cardinality Entity Reference or File/Image field
Open the form that contains the field, see the modal auto-open as expected, select some Entities
Once selection is complete, the browser opens again

-- samuel.mortenson

I've also noticed that only the first function in instance.js_callbacks gets bound to the button, because .entity-browser-processed is added immediately.

Proposed resolution

Every instance should only be initialized once, that way all callbacks get added only once and the auto-open is only triggered when the button is first shown.

Would it be acceptable to add a jQuery.once call to the click() call introduced by this issue? [...] That way it would still auto-open on load, but after a selection is made or the modal closes, it wouldn't immediately open up again.

This most likely does not fix issues with entity browser in IEF simple widgets, but when using multiple of those in a single form, conflicts cannot sanely be avoided.

🐛 Bug report
Status

Needs review

Version

2.0

Component

Display plugins

Created by

🇩🇪Germany ckaotik Berlin

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇫🇮Finland jviitamaki

    If return statement in latest patch causes NS_BINDING_ABORTED breaking referencing of existing entities in versions >2.6.

  • 🇫🇮Finland jviitamaki

    This seems to be working working better for what ever reason.

  • 🇺🇸United States Luke.Leber Pennsylvania

    #9 seems to work wonderfully against E.B. 2.9.0 and Drupal 9.4.x.

    Wrapping things in this pseudo-code seems to be an elegant solution, but I do think that using drupal/once would be more elegant. IMO it would be worth merging this bug fix in as-is and opening a follow-up task to refactor things to drop jquery / use drupal/once.

    TL;DR - +1 RTBC

  • 🇭🇺Hungary peter_serfozo

    If the focus is on another field (for example a text field) before opening the entity browser modal & closing it by submitting its form, the page is scrolled to the previously focused page element. To prevent it, we can add .focus() before triggering the .click().

Production build 0.69.0 2024