Steps to reproduce:

1. "Article" node has a field referencing "Promo item" nodes, using Inline Entity Form complex widget.
2. Promo item has an image field using Entity Browser widget with the configuration posted below.
3. Create an article with a Promo item. Select files, save the promo item and the node.
4. Edit the article and edit the promo item. Remove the image.
5 Click Select files

Expected result:

Modal opens for uploading or selecting a new file

Actual Result:

Ajax Error:

Uncaught AjaxError: 
An AJAX HTTP error occurred.
HTTP Result Code: 500
Debugging information follows.
Path: /node/54/edit?destination=node/54&ajax_form=1&_wrapper_format=drupal_ajax
StatusText: Internal Server Error
ResponseText: {"message":"A fatal error occurred: The specified #ajax callback is empty or not callable."}

Log message:

Symfony\Component\HttpKernel\Exception\HttpException: The specified #ajax callback is empty or not callable. in Drupal\Core\Form\FormAjaxResponseBuilder->buildResponse() (line 74 of /var/www/site/web/core/lib/Drupal/Core/Form/FormAjaxResponseBuilder.php).

Entity Browser widget config:

uuid: f5b48f84-a55c-46b0-9d00-fb6c4f919c97
langcode: und
status: true
dependencies:
  enforced:
    module:
      - file_browser
  module:
    - dropzonejs_eb_widget
_core:
  default_config_hash: 1Qm0yNBmX5LIza8lyQIkB8HlRmBfBBQnSTr1LXS9O1w
name: browse_files
label: 'Browser for files'
display: modal
display_configuration:
  widget_ids:
    735d146c-a4b2-4327-a057-d109e0905e05: 'Upload files'
    a4ad947c-9669-497c-9988-24351955a02f: 'Files listing'
  width: '1024'
  height: '768'
  link_text: 'Select files'
  auto_open: false
selection_display: no_display
selection_display_configuration: {  }
widget_selector: tabs
widget_selector_configuration: {  }
widgets:
  a4ad947c-9669-497c-9988-24351955a02f:
    settings:
      view: files_entity_browser
      view_display: entity_browser_1
    uuid: a4ad947c-9669-497c-9988-24351955a02f
    weight: 1
    label: 'Select existing image'
    id: view
  735d146c-a4b2-4327-a057-d109e0905e05:
    settings:
      upload_location: 'public://'
      dropzone_description: 'Click or drop files here to upload them'
      extensions: 'jpg jpeg gif png txt doc xls pdf ppt pps odt ods odp svg'
      max_filesize: 2M
    uuid: 735d146c-a4b2-4327-a057-d109e0905e05
    weight: 0
    label: 'Upload image'
    id: dropzonejs

Comments

reekris created an issue. See original summary.

reekris’s picture

reekris commented

Switching the browser widget from modal to an iframe fixes the problem.

primsi’s picture

primsi commented
Status: Active » Postponed (maintainer needs more info)

I've tested this with the latest code and your configuration (which doesn't include an ife wiget). I also added a new ife widget and fixed the configuration-not-saving issue #2366315: Widget configuration is not saved correctly by hand, so that conf was looking like this:

uuid: f5b48f84-a55c-46b0-9d00-fb6c4f919c97
langcode: und
status: true
dependencies:
  enforced:
    module:
      - file_browser
  module:
    - dropzonejs_eb_widget
    - entity_browser_entity_form
    - views
_core:
  default_config_hash: 1Qm0yNBmX5LIza8lyQIkB8HlRmBfBBQnSTr1LXS9O1w
name: browse_files
label: 'Browser for files'
display: modal
display_configuration:
  widget_ids:
    735d146c-a4b2-4327-a057-d109e0905e05: 'Upload files'
    a4ad947c-9669-497c-9988-24351955a02f: 'Files listing'
  width: '1024'
  height: '768'
  link_text: 'Select files'
  auto_open: false
selection_display: no_display
selection_display_configuration: {  }
widget_selector: tabs
widget_selector_configuration: {  }
widgets:
  a4ad947c-9669-497c-9988-24351955a02f:
    settings:
      view: files_entity_browser
      view_display: entity_browser_1
    uuid: a4ad947c-9669-497c-9988-24351955a02f
    weight: 1
    label: 'Select existing image'
    id: view
  735d146c-a4b2-4327-a057-d109e0905e05:
    settings:
      upload_location: 'public://'
      dropzone_description: 'Click or drop files here to upload them'
      extensions: 'jpg jpeg gif png txt doc xls pdf ppt pps odt ods odp svg'
      max_filesize: 2M
    uuid: 735d146c-a4b2-4327-a057-d109e0905e05
    weight: 0
    label: 'Upload image'
    id: dropzonejs
  f5e16600-e79e-4416-97c4-4a5420ba7564:
    settings:
      entity_type: media
      bundle: images
    uuid: f5e16600-e79e-4416-97c4-4a5420ba7564
    weight: 3
    label: entity_form
    id: entity_form

The modal opened normally and files were saving. If you solved the issue otherwise feel free to close the issue.

reekris’s picture

reekris commented

@Primsi thanks for trying to reproduce my issue!

Seems like you might've misunderstood the reproduction steps.
It's not the entity browser config that should have an ief widget it's the reference to the entity containing the image field that is an IEF field.

The bug only occurs when the image field is within an entity referenced via IEF.

Edit:

It also happens when the image field is within a Paragraph using the Paragraphs module. That hints that it is not an IEF issue but en entity browser issue.

Please tel me if you need more info or if anything is unclear.

primsi’s picture

primsi commented
Status: Postponed (maintainer needs more info) » Needs work

Thanks for the reminder. I glanced over the steps to quickly.

I was able to reproduce it now. The Modal doesn't open after you have removed the EB element. Didn't look into it though.

leksat’s picture

leksat commented

Not really sure, but maybe #2745091: $is_relevant_submit calculation is not precise is related.

reekris’s picture

reekris commented

I can still reproduce this issue with the latest dev version of Entity Browser, so the solution in #6 dit not solve the problem unfortunately.

scottsawyer’s picture

scottsawyer
Primary language English
Location Atlanta
commented
Related issues: +#3067693: Problem with entity browser inside IEF when replacing, or remove / add

I am also getting this error on 8.x-2.x-dev.

Minimal Setup:

Parent Entity - 1 entity reference field to another content entity, unlimited, form display: ief complex
Child Entity - 1 entity reference field to another content entity, limited 1, form display: entity_browser
Grandchild Entity. - Could be anything, a node or something.

Create a Grandchild. Save.
Create a Parent entity, use ief to create a single Child, use entity_browser to select Grandchild . Save.

Edit Parent. Edit Child. Remove Grandchild. Use entity_browser to select Grandchild. Ajax Error.

Symfony\Component\HttpKernel\Exception\HttpException: The specified #ajax callback is empty or not callable. in Drupal\Core\Form\FormAjaxResponseBuilder->buildResponse() (line 67 of /public/web/core/lib/Drupal/Core/Form/FormAjaxResponseBuilder.php).

This is not happening with the iFrame widget.

scottsawyer’s picture

scottsawyer
Primary language English
Location Atlanta
commented

When I click "Remove", here is what I get back:

[  
   {  
      "command":"settings",
      "settings":{  
         "ajaxPageState":{  
            "theme":"travel_store",
            "libraries":"admin_toolbar\/search,admin_toolbar\/toolbar.tree,adminimal_admin_toolbar\/adminimal-admin-toolbar,adminimal_admin_toolbar\/google-fonts,big_pipe\/big_pipe,calendar\/calendar.theme,ckeditor\/drupal.ckeditor,ckeditor\/drupal.ckeditor.plugins.drupalimagecaption,classy\/base,classy\/messages,colorbox\/default,colorbox_inline\/colorbox_inline,contextual\/drupal.contextual-links,contextual\/drupal.contextual-toolbar,core\/drupal.active-link,core\/drupal.autocomplete,core\/drupal.date,core\/drupal.dropbutton,core\/drupal.states,core\/drupal.tabledrag,core\/drupal.tableresponsive,core\/html5shiv,core\/normalize,devel\/devel-toolbar,entity_browser\/entity_reference,entity_browser\/modal,field_group\/core,field_group\/element.horizontal_tabs,field_group\/formatter.details,field_group\/formatter.html_element,field_group\/formatter.tabs,filter\/drupal.filter,fontawesome\/fontawesome.svg.brands,fontawesome\/fontawesome.svg.regular,fontawesome\/fontawesome.svg.solid,inline_entity_form\/widget,quickedit\/quickedit,shortcut\/drupal.shortcut,system\/base,toolbar\/toolbar,toolbar\/toolbar.escapeAdmin,tour\/tour,travel_store\/global-styling,user\/drupal.user.icons,views\/views.ajax,views\/views.module,views_autocomplete_filters\/drupal.views-autocomplete-filters"
         },
         "entity_browser_reopen_browser":false,
         "entity_browser":{  
            "adfe080bb6491bd31be503167b33906fbcc5c3a1":{  
               "cardinality":1,
               "selection_mode":"selection_append",
               "selector":"#edit-field-booking-accommodation-target-id--qfc-rR8bl_E",
               "auto_open":false
            },
            "modal":{  
               "adfe080bb6491bd31be503167b33906fbcc5c3a1":{  
                  "uuid":"adfe080bb6491bd31be503167b33906fbcc5c3a1",
                  "js_callbacks":[  
                     "Drupal.entityBrowser.selectionCompleted"
                  ],
                  "original_path":"\/booking\/18\/edit",
                  "auto_open":false
               }
            }
         },
         "ajax":{  
            "edit-field-bookings-1-inline-entity-form-entities-1-form-field-booking-accommodation-entity-browser-entity-browser-open-modal--rReHcSYfEiY":{  
               "callback":[  
                  {  

                  },
                  "openModal"
               ],
               "event":"click",
               "url":"\/booking\/18\/edit?ajax_form=1\u0026_wrapper_format=drupal_ajax",
               "dialogType":"ajax",
               "submit":{  
                  "_triggering_element_name":"field_bookings_1_inline_entity_form_entities_1_form_field_booking_accommodation_entity_browser_entity_browser",
                  "_triggering_element_value":"Select Accommodation Booking"
               }
            },
            "edit-field-booking-accommodation-target-id--qfc-rR8bl_E":{  
               "callback":[  
                  "Drupal\\entity_browser\\Plugin\\Field\\FieldWidget\\EntityReferenceBrowserWidget",
                  "updateWidgetCallback"
               ],
               "wrapper":"edit-field-booking-accommodation--6ywzQtsiLBg",
               "event":"entity_browser_value_updated",
               "url":"\/booking\/18\/edit?ajax_form=1\u0026_wrapper_format=drupal_ajax",
               "dialogType":"ajax",
               "submit":{  
                  "_triggering_element_name":"field_bookings[1][inline_entity_form][entities][1][form][field_booking_accommodation][target_id]"
               }
            }
         },
         "ajaxTrustedUrl":{  
            "\/booking\/18\/edit?ajax_form=1\u0026_wrapper_format=drupal_ajax":true
         },
         "pluralDelimiter":"\u0003",
         "user":{  
            "uid":"1",
            "permissionsHash":"ae88bd83df7f866ed14cadfc7f233a640ec15c02401cd41e76fe789b1e9067b0"
         }
      },
      "merge":true
   },
   {  
      "command":"update_build_id",
      "old":"form-5z9GgGE3i83yZISawEYs0aVBYSoXotWrjppt3Qou2WQ",
      "new":"form-_SGemi7CJypd8JL6AiLHtRkXy8yWcWtyUcpN2LqGv9c"
   },
   {  
      "command":"insert",
      "method":null,
      "selector":null,
      "data":"\n\n\u003C!-- THEME DEBUG --\u003E\n\u003C!-- THEME HOOK: \u0027details\u0027 --\u003E\n\u003C!-- BEGIN OUTPUT from \u0027core\/themes\/classy\/templates\/form\/details.html.twig\u0027 --\u003E\n\u003Cdetails data-drupal-selector=\u0022edit-field-booking-accommodation-6ywzqtsilbg\u0022 id=\u0022edit-field-booking-accommodation--6ywzQtsiLBg\u0022 class=\u0022js-form-wrapper form-wrapper\u0022 open=\u0022open\u0022\u003E    \u003Csummary role=\u0022button\u0022 aria-controls=\u0022edit-field-booking-accommodation--6ywzQtsiLBg\u0022 aria-expanded=\u0022true\u0022 aria-pressed=\u0022true\u0022\u003EAccommodation\u003C\/summary\u003E\u003Cdiv class=\u0022details-wrapper\u0022\u003E\n    \n\n\u003C!-- THEME DEBUG --\u003E\n\u003C!-- THEME HOOK: \u0027input__hidden\u0027 --\u003E\n\u003C!-- FILE NAME SUGGESTIONS:\n   * input--hidden.html.twig\n   x input.html.twig\n--\u003E\n\u003C!-- BEGIN OUTPUT from \u0027core\/themes\/classy\/templates\/form\/input.html.twig\u0027 --\u003E\n\u003Cinput id=\u0022edit-field-booking-accommodation-target-id--qfc-rR8bl_E\u0022 data-cardinality=\u00221\u0022 data-entity-browser-visible data-entity-browser-available=\u00221\u0022 data-drupal-selector=\u0022edit-field-booking-accommodation-target-id-qfc-rr8bl-e\u0022 type=\u0022hidden\u0022 name=\u0022field_bookings[1][inline_entity_form][entities][1][form][field_booking_accommodation][target_id]\u0022 value=\u0022\u0022 \/\u003E\n\n\u003C!-- END OUTPUT from \u0027core\/themes\/classy\/templates\/form\/input.html.twig\u0027 --\u003E\n\n\n\n\u003C!-- THEME DEBUG --\u003E\n\u003C!-- THEME HOOK: \u0027container\u0027 --\u003E\n\u003C!-- BEGIN OUTPUT from \u0027core\/themes\/classy\/templates\/form\/container.html.twig\u0027 --\u003E\n\u003Cdiv data-drupal-selector=\u0022edit-field-bookings-1-inline-entity-form-entities-1-form-field-booking-accommodation-entity-browser-entity-browser\u0022 id=\u0022edit-field-bookings-1-inline-entity-form-entities-1-form-field-booking-accommodation-entity-browser-entity-browser--BOwzCwFcFxo\u0022 class=\u0022js-form-wrapper form-wrapper\u0022\u003E\n\n\u003C!-- THEME DEBUG --\u003E\n\u003C!-- THEME HOOK: \u0027input__hidden\u0027 --\u003E\n\u003C!-- FILE NAME SUGGESTIONS:\n   * input--hidden.html.twig\n   x input.html.twig\n--\u003E\n\u003C!-- BEGIN OUTPUT from \u0027core\/themes\/classy\/templates\/form\/input.html.twig\u0027 --\u003E\n\u003Cinput data-drupal-selector=\u0022edit-field-bookings-1-inline-entity-form-entities-1-form-field-booking-accommodation-entity-browser-entity-browser-path\u0022 type=\u0022hidden\u0022 name=\u0022field_bookings[1][inline_entity_form][entities][1][form][field_booking_accommodation][entity_browser][entity_browser][path]\u0022 value=\u0022\/entity-browser\/modal\/bookings_accommodation_security?uuid=adfe080bb6491bd31be503167b33906fbcc5c3a1\u0026amp;original_path=\/booking\/18\/edit\u0022 \/\u003E\n\n\u003C!-- END OUTPUT from \u0027core\/themes\/classy\/templates\/form\/input.html.twig\u0027 --\u003E\n\n\n\n\u003C!-- THEME DEBUG --\u003E\n\u003C!-- THEME HOOK: \u0027input__submit\u0027 --\u003E\n\u003C!-- FILE NAME SUGGESTIONS:\n   * input--submit.html.twig\n   x input.html.twig\n--\u003E\n\u003C!-- BEGIN OUTPUT from \u0027core\/themes\/classy\/templates\/form\/input.html.twig\u0027 --\u003E\n\u003Cinput data-uuid=\u0022adfe080bb6491bd31be503167b33906fbcc5c3a1\u0022 data-drupal-selector=\u0022edit-field-bookings-1-inline-entity-form-entities-1-form-field-booking-accommodation-entity-browser-entity-browser-open-modal\u0022 formnovalidate=\u0022formnovalidate\u0022 type=\u0022submit\u0022 id=\u0022edit-field-bookings-1-inline-entity-form-entities-1-form-field-booking-accommodation-entity-browser-entity-browser-open-modal--rReHcSYfEiY\u0022 name=\u0022field_bookings_1_inline_entity_form_entities_1_form_field_booking_accommodation_entity_browser_entity_browser\u0022 value=\u0022Select Accommodation Booking\u0022 class=\u0022button js-form-submit form-submit\u0022 \/\u003E\n\n\u003C!-- END OUTPUT from \u0027core\/themes\/classy\/templates\/form\/input.html.twig\u0027 --\u003E\n\n\u003C\/div\u003E\n\n\u003C!-- END OUTPUT from \u0027core\/themes\/classy\/templates\/form\/container.html.twig\u0027 --\u003E\n\n\n\n\u003C!-- THEME DEBUG --\u003E\n\u003C!-- THEME HOOK: \u0027input__hidden\u0027 --\u003E\n\u003C!-- FILE NAME SUGGESTIONS:\n   * input--hidden.html.twig\n   x input.html.twig\n--\u003E\n\u003C!-- BEGIN OUTPUT from \u0027core\/themes\/classy\/templates\/form\/input.html.twig\u0027 --\u003E\n\u003Cinput id=\u0022edit-field-bookings-1-inline-entity-form-entities-1-form-field-booking-accommodation-entity-browser-m3xu-jgove-target--KYndzVCsfUY\u0022 class=\u0022eb-target\u0022 data-drupal-selector=\u0022edit-field-bookings-1-inline-entity-form-entities-1-form-field-booking-accommodation-entity-browser-m3xu-jgove-target-kyndzvcsfuy\u0022 type=\u0022hidden\u0022 name=\u0022field_bookings[1][inline_entity_form][entities][1][form][field_booking_accommodation][entity_browser][entity_ids]\u0022 value=\u0022\u0022 \/\u003E\n\n\u003C!-- END OUTPUT from \u0027core\/themes\/classy\/templates\/form\/input.html.twig\u0027 --\u003E\n\n\n\n\u003C!-- THEME DEBUG --\u003E\n\u003C!-- THEME HOOK: \u0027container\u0027 --\u003E\n\u003C!-- BEGIN OUTPUT from \u0027core\/themes\/classy\/templates\/form\/container.html.twig\u0027 --\u003E\n\u003Cdiv class=\u0022entities-list entity-type--bookings js-form-wrapper form-wrapper\u0022 data-entity-browser-entities-list=\u00221\u0022 data-drupal-selector=\u0022edit-field-bookings-1-inline-entity-form-entities-1-form-field-booking-accommodation-current\u0022 id=\u0022edit-field-bookings-1-inline-entity-form-entities-1-form-field-booking-accommodation-current--MX7DRuqNsCQ\u0022\u003E\u003C\/div\u003E\n\n\u003C!-- END OUTPUT from \u0027core\/themes\/classy\/templates\/form\/container.html.twig\u0027 --\u003E\n\n\u003C\/div\u003E\n\u003C\/details\u003E\n\n\u003C!-- END OUTPUT from \u0027core\/themes\/classy\/templates\/form\/details.html.twig\u0027 --\u003E\n\n",
      "settings":null
   }
]

Sorry for all of the theme debug cruft. Here is the updated widget cleaned up:

<details data-drupal-selector="edit-field-booking-accommodation-6ywzqtsilbg" id="edit-field-booking-accommodation--6ywzQtsiLBg" class="js-form-wrapper form-wrapper" open="open">
    <summary role="button" aria-controls="edit-field-booking-accommodation--6ywzQtsiLBg" aria-expanded="true" aria-pressed="true">Accommodation</summary>
    <div class="details-wrapper">    
            
        <input id="edit-field-booking-accommodation-target-id--qfc-rR8bl_E" data-cardinality="1" data-entity-browser-visible data-entity-browser-available="1" data-drupal-selector="edit-field-booking-accommodation-target-id-qfc-rr8bl-e" type="hidden" name="field_bookings[1][inline_entity_form][entities][1][form][field_booking_accommodation][target_id]" value="" />    
        
    
        <div data-drupal-selector="edit-field-bookings-1-inline-entity-form-entities-1-form-field-booking-accommodation-entity-browser-entity-browser" id="edit-field-bookings-1-inline-entity-form-entities-1-form-field-booking-accommodation-entity-browser-entity-browser--BOwzCwFcFxo" class="js-form-wrapper form-wrapper">    
        
    
            <input data-drupal-selector="edit-field-bookings-1-inline-entity-form-entities-1-form-field-booking-accommodation-entity-browser-entity-browser-path" type="hidden" name="field_bookings[1][inline_entity_form][entities][1][form][field_booking_accommodation][entity_browser][entity_browser][path]" value="/entity-browser/modal/bookings_accommodation_security?uuid=adfe080bb6491bd31be503167b33906fbcc5c3a1\u0026amp;original_path=/booking/18/edit" />    
        
  
            <input data-uuid="adfe080bb6491bd31be503167b33906fbcc5c3a1" data-drupal-selector="edit-field-bookings-1-inline-entity-form-entities-1-form-field-booking-accommodation-entity-browser-entity-browser-open-modal" formnovalidate="formnovalidate" type="submit" id="edit-field-bookings-1-inline-entity-form-entities-1-form-field-booking-accommodation-entity-browser-entity-browser-open-modal--rReHcSYfEiY" name="field_bookings_1_inline_entity_form_entities_1_form_field_booking_accommodation_entity_browser_entity_browser" value="Select Accommodation Booking" class="button js-form-submit form-submit" />    
        
        </div>    
        
  
        <input id="edit-field-bookings-1-inline-entity-form-entities-1-form-field-booking-accommodation-entity-browser-m3xu-jgove-target--KYndzVCsfUY" class="eb-target" data-drupal-selector="edit-field-bookings-1-inline-entity-form-entities-1-form-field-booking-accommodation-entity-browser-m3xu-jgove-target-kyndzvcsfuy" type="hidden" name="field_bookings[1][inline_entity_form][entities][1][form][field_booking_accommodation][entity_browser][entity_ids]" value="" />    
        
   
        <div class="entities-list entity-type--bookings js-form-wrapper form-wrapper" data-entity-browser-entities-list="1" data-drupal-selector="edit-field-bookings-1-inline-entity-form-entities-1-form-field-booking-accommodation-current" id="edit-field-bookings-1-inline-entity-form-entities-1-form-field-booking-accommodation-current--MX7DRuqNsCQ"></div>    
        
    </div>    
</details>

It seems right to me, but it seems the ajax handler is getting confused about something.

scottsawyer’s picture

scottsawyer
Primary language English
Location Atlanta
commented
Version: 8.x-1.x-dev » 8.x-2.x-dev

If I edit Parent, create a new Child, add a Grandchild, then remove the Grandchild ( note, I do not save Parent or Child ), here is the ajax response. This successfully opens the modal. As long as I do not save the Parent or Child with a value in the Grandchild field, it works perfectly.

As soon as I save the Child or Parent with a Grandchild field populated, I get the ajax error.

I feel like I saw another issue that was similar to this, only with Paragraphs. That issue was fixed in an earlier version, so I am going to update the Version tag on this issue. I am also not sure this is a User Interface issue, seems more core or something.

[  
   {  
      "command":"settings",
      "settings":{  
         "ajaxPageState":{  
            "theme":"travel_store",
            "libraries":"admin_toolbar\/search,admin_toolbar\/toolbar.tree,adminimal_admin_toolbar\/adminimal-admin-toolbar,adminimal_admin_toolbar\/google-fonts,big_pipe\/big_pipe,calendar\/calendar.theme,ckeditor\/drupal.ckeditor,ckeditor\/drupal.ckeditor.plugins.drupalimagecaption,classy\/base,classy\/messages,colorbox\/default,colorbox_inline\/colorbox_inline,contextual\/drupal.contextual-links,contextual\/drupal.contextual-toolbar,core\/drupal.active-link,core\/drupal.autocomplete,core\/drupal.date,core\/drupal.dropbutton,core\/drupal.states,core\/drupal.tabledrag,core\/drupal.tableresponsive,core\/html5shiv,core\/normalize,devel\/devel-toolbar,entity_browser\/entity_reference,entity_browser\/modal,field_group\/core,field_group\/element.horizontal_tabs,field_group\/formatter.details,field_group\/formatter.html_element,field_group\/formatter.tabs,filter\/drupal.filter,fontawesome\/fontawesome.svg.brands,fontawesome\/fontawesome.svg.regular,fontawesome\/fontawesome.svg.solid,inline_entity_form\/widget,quickedit\/quickedit,shortcut\/drupal.shortcut,system\/base,toolbar\/toolbar,toolbar\/toolbar.escapeAdmin,tour\/tour,travel_store\/global-styling,user\/drupal.user.icons,views\/views.ajax,views\/views.module,views_autocomplete_filters\/drupal.views-autocomplete-filters"
         },
         "entity_browser_reopen_browser":false,
         "entity_browser":{  
            "bcb862df4258ea1c9b178651a1d37fd3059543e2":{  
               "cardinality":1,
               "selection_mode":"selection_append",
               "selector":"#edit-field-booking-accommodation-target-id--_7B8YJ93c5s",
               "auto_open":false
            },
            "modal":{  
               "bcb862df4258ea1c9b178651a1d37fd3059543e2":{  
                  "uuid":"bcb862df4258ea1c9b178651a1d37fd3059543e2",
                  "js_callbacks":[  
                     "Drupal.entityBrowser.selectionCompleted"
                  ],
                  "original_path":"\/booking\/18\/edit",
                  "auto_open":false
               }
            }
         },
         "ajax":{  
            "edit-field-bookings-2-inline-entity-form-entities-2-form-field-booking-accommodation-entity-browser-entity-browser-open-modal---oXjX4Lkrtc":{  
               "callback":[  
                  {  

                  },
                  "openModal"
               ],
               "event":"click",
               "url":"\/booking\/18\/edit?ajax_form=1\u0026_wrapper_format=drupal_ajax",
               "dialogType":"ajax",
               "submit":{  
                  "_triggering_element_name":"field_bookings_2_inline_entity_form_entities_2_form_field_booking_accommodation_entity_browser_entity_browser",
                  "_triggering_element_value":"Select Accommodation Booking"
               }
            },
            "edit-field-booking-accommodation-target-id--_7B8YJ93c5s":{  
               "callback":[  
                  "Drupal\\entity_browser\\Plugin\\Field\\FieldWidget\\EntityReferenceBrowserWidget",
                  "updateWidgetCallback"
               ],
               "wrapper":"edit-field-booking-accommodation--93NrMEwaRUM",
               "event":"entity_browser_value_updated",
               "url":"\/booking\/18\/edit?ajax_form=1\u0026_wrapper_format=drupal_ajax",
               "dialogType":"ajax",
               "submit":{  
                  "_triggering_element_name":"field_bookings[2][inline_entity_form][entities][2][form][field_booking_accommodation][target_id]"
               }
            }
         },
         "ajaxTrustedUrl":{  
            "\/booking\/18\/edit?ajax_form=1\u0026_wrapper_format=drupal_ajax":true
         },
         "pluralDelimiter":"\u0003",
         "user":{  
            "uid":"1",
            "permissionsHash":"ae88bd83df7f866ed14cadfc7f233a640ec15c02401cd41e76fe789b1e9067b0"
         }
      },
      "merge":true
   },
   {  
      "command":"update_build_id",
      "old":"form-wk8lAiXUX-AIekCWdVX9RKY1IjTSk1IMDWgrhiYONWM",
      "new":"form-2z3cHXEjMo5DH4WKwk50i-Qy8fQY0WYG3Qw2vcWGosY"
   },
   {  
      "command":"insert",
      "method":null,
      "selector":null,
      "data":"\n\n\u003C!-- THEME DEBUG --\u003E\n\u003C!-- THEME HOOK: \u0027details\u0027 --\u003E\n\u003C!-- BEGIN OUTPUT from \u0027core\/themes\/classy\/templates\/form\/details.html.twig\u0027 --\u003E\n\u003Cdetails data-drupal-selector=\u0022edit-field-booking-accommodation-93nrmewarum\u0022 id=\u0022edit-field-booking-accommodation--93NrMEwaRUM\u0022 class=\u0022js-form-wrapper form-wrapper\u0022 open=\u0022open\u0022\u003E    \u003Csummary role=\u0022button\u0022 aria-controls=\u0022edit-field-booking-accommodation--93NrMEwaRUM\u0022 aria-expanded=\u0022true\u0022 aria-pressed=\u0022true\u0022\u003EAccommodation\u003C\/summary\u003E\u003Cdiv class=\u0022details-wrapper\u0022\u003E\n    \n\n\u003C!-- THEME DEBUG --\u003E\n\u003C!-- THEME HOOK: \u0027input__hidden\u0027 --\u003E\n\u003C!-- FILE NAME SUGGESTIONS:\n   * input--hidden.html.twig\n   x input.html.twig\n--\u003E\n\u003C!-- BEGIN OUTPUT from \u0027core\/themes\/classy\/templates\/form\/input.html.twig\u0027 --\u003E\n\u003Cinput id=\u0022edit-field-booking-accommodation-target-id--_7B8YJ93c5s\u0022 data-cardinality=\u00221\u0022 data-entity-browser-visible data-entity-browser-available=\u00221\u0022 data-drupal-selector=\u0022edit-field-booking-accommodation-target-id-7b8yj93c5s\u0022 type=\u0022hidden\u0022 name=\u0022field_bookings[2][inline_entity_form][entities][2][form][field_booking_accommodation][target_id]\u0022 value=\u0022\u0022 \/\u003E\n\n\u003C!-- END OUTPUT from \u0027core\/themes\/classy\/templates\/form\/input.html.twig\u0027 --\u003E\n\n\n\n\u003C!-- THEME DEBUG --\u003E\n\u003C!-- THEME HOOK: \u0027container\u0027 --\u003E\n\u003C!-- BEGIN OUTPUT from \u0027core\/themes\/classy\/templates\/form\/container.html.twig\u0027 --\u003E\n\u003Cdiv data-drupal-selector=\u0022edit-field-bookings-2-inline-entity-form-entities-2-form-field-booking-accommodation-entity-browser-entity-browser\u0022 id=\u0022edit-field-bookings-2-inline-entity-form-entities-2-form-field-booking-accommodation-entity-browser-entity-browser--80FLYKMPB8M\u0022 class=\u0022js-form-wrapper form-wrapper\u0022\u003E\n\n\u003C!-- THEME DEBUG --\u003E\n\u003C!-- THEME HOOK: \u0027input__hidden\u0027 --\u003E\n\u003C!-- FILE NAME SUGGESTIONS:\n   * input--hidden.html.twig\n   x input.html.twig\n--\u003E\n\u003C!-- BEGIN OUTPUT from \u0027core\/themes\/classy\/templates\/form\/input.html.twig\u0027 --\u003E\n\u003Cinput data-drupal-selector=\u0022edit-field-bookings-2-inline-entity-form-entities-2-form-field-booking-accommodation-entity-browser-entity-browser-path\u0022 type=\u0022hidden\u0022 name=\u0022field_bookings[2][inline_entity_form][entities][2][form][field_booking_accommodation][entity_browser][entity_browser][path]\u0022 value=\u0022\/entity-browser\/modal\/bookings_accommodation_security?uuid=bcb862df4258ea1c9b178651a1d37fd3059543e2\u0026amp;original_path=\/booking\/18\/edit\u0022 \/\u003E\n\n\u003C!-- END OUTPUT from \u0027core\/themes\/classy\/templates\/form\/input.html.twig\u0027 --\u003E\n\n\n\n\u003C!-- THEME DEBUG --\u003E\n\u003C!-- THEME HOOK: \u0027input__submit\u0027 --\u003E\n\u003C!-- FILE NAME SUGGESTIONS:\n   * input--submit.html.twig\n   x input.html.twig\n--\u003E\n\u003C!-- BEGIN OUTPUT from \u0027core\/themes\/classy\/templates\/form\/input.html.twig\u0027 --\u003E\n\u003Cinput data-uuid=\u0022bcb862df4258ea1c9b178651a1d37fd3059543e2\u0022 data-drupal-selector=\u0022edit-field-bookings-2-inline-entity-form-entities-2-form-field-booking-accommodation-entity-browser-entity-browser-open-modal\u0022 formnovalidate=\u0022formnovalidate\u0022 type=\u0022submit\u0022 id=\u0022edit-field-bookings-2-inline-entity-form-entities-2-form-field-booking-accommodation-entity-browser-entity-browser-open-modal---oXjX4Lkrtc\u0022 name=\u0022field_bookings_2_inline_entity_form_entities_2_form_field_booking_accommodation_entity_browser_entity_browser\u0022 value=\u0022Select Accommodation Booking\u0022 class=\u0022button js-form-submit form-submit\u0022 \/\u003E\n\n\u003C!-- END OUTPUT from \u0027core\/themes\/classy\/templates\/form\/input.html.twig\u0027 --\u003E\n\n\u003C\/div\u003E\n\n\u003C!-- END OUTPUT from \u0027core\/themes\/classy\/templates\/form\/container.html.twig\u0027 --\u003E\n\n\n\n\u003C!-- THEME DEBUG --\u003E\n\u003C!-- THEME HOOK: \u0027input__hidden\u0027 --\u003E\n\u003C!-- FILE NAME SUGGESTIONS:\n   * input--hidden.html.twig\n   x input.html.twig\n--\u003E\n\u003C!-- BEGIN OUTPUT from \u0027core\/themes\/classy\/templates\/form\/input.html.twig\u0027 --\u003E\n\u003Cinput id=\u0022edit-field-bookings-2-inline-entity-form-entities-2-form-field-booking-accommodation-entity-browser-0rpb6tg9bew-target--BHbyJU6bOg4\u0022 class=\u0022eb-target\u0022 data-drupal-selector=\u0022edit-field-bookings-2-inline-entity-form-entities-2-form-field-booking-accommodation-entity-browser-0rpb6tg9bew-target-bhbyju6bog4\u0022 type=\u0022hidden\u0022 name=\u0022field_bookings[2][inline_entity_form][entities][2][form][field_booking_accommodation][entity_browser][entity_ids]\u0022 value=\u0022\u0022 \/\u003E\n\n\u003C!-- END OUTPUT from \u0027core\/themes\/classy\/templates\/form\/input.html.twig\u0027 --\u003E\n\n\n\n\u003C!-- THEME DEBUG --\u003E\n\u003C!-- THEME HOOK: \u0027container\u0027 --\u003E\n\u003C!-- BEGIN OUTPUT from \u0027core\/themes\/classy\/templates\/form\/container.html.twig\u0027 --\u003E\n\u003Cdiv class=\u0022entities-list entity-type--bookings js-form-wrapper form-wrapper\u0022 data-entity-browser-entities-list=\u00221\u0022 data-drupal-selector=\u0022edit-field-bookings-2-inline-entity-form-entities-2-form-field-booking-accommodation-current\u0022 id=\u0022edit-field-bookings-2-inline-entity-form-entities-2-form-field-booking-accommodation-current--Aa9eSDiqvKg\u0022\u003E\u003C\/div\u003E\n\n\u003C!-- END OUTPUT from \u0027core\/themes\/classy\/templates\/form\/container.html.twig\u0027 --\u003E\n\n\u003C\/div\u003E\n\u003C\/details\u003E\n\n\u003C!-- END OUTPUT from \u0027core\/themes\/classy\/templates\/form\/details.html.twig\u0027 --\u003E\n\n",
      "settings":null
   }
]
scottsawyer’s picture

scottsawyer
Primary language English
Location Atlanta
commented
Related issues: +#3046416: Remove button conflict wrong triggering element

I believe this commit has something to do with this problem . I checked out EntityReferenceBrowserWidget.php from the previous commit and suddenly it started working again.

MarkedGoose’s picture

MarkedGoose commented

I can confirm the commit scottsawyer talked about in #11 has something to do with the issue.
Reverting the patch suddenly fixes the issue.

jonathanshaw’s picture

jonathanshaw
Primary language English
Location Stroud, UK
commented

This may be a duplicate of #2851580: Re-order + remove broken with the Entity Reference (and File) widget, or fixed anyway by fixing that issue; it would be useful is someone could check whether the latest patch from that issue solves this issue.

rikki_iki’s picture

rikki_iki commented

I think @jonathanshaw is right, the latest patch (#92) from #2851580 fixes this issue for me.

froboy’s picture

froboy
he/him
Primary language English
Location Chicago, IL
commented
Status: Needs work » Closed (duplicate)

Confirming #2851580: Re-order + remove broken with the Entity Reference (and File) widget worked for me. In my case I had Node > Paragraph > Block (via IEF > Media. Media selection was bringing up a modal and spinning. Applying the linked patch and clearing all browser session data or opening a new session resolved the issue.

Even though the issues are different, I think closing this as a duplicate to redirect folks to the proper issue makes sense.