Since we upgraded to Drupal 8.2.4 we have an issue with entity browsers using the View widget.

Steps to reproduce:

1) Create an Entity Browser configuration:

- Display plugin: Modal
- Widget selector plugin: Tags
- Selection display plugin: None

Widgets (last tab in configuration form of entity browser): View selecting a view with an entity browser display and exposed filters

2) Assign this entity browser as the widget of an entity reference field in a content type
3) Create a new content of this content type and click the button to open the entity browser
4) Filter the view with the filters provided by the view and click Apply
5) Close the entity browser modal
6) Open the entity browser again
7) Try to use exposed filters again

Observed behavior:

JS Error:

VM1513 ajax_view.js?v=8.2.4:202 Uncaught TypeError: Cannot read property 'top' of undefined
at Drupal.AjaxCommands.viewsScrollTop (VM1513 ajax_view.js?v=8.2.4:202)
at Drupal.Ajax.success (ajax.js?v=8.2.4:864)
at Object.success (ajax.js?v=8.2.4:505)
at Object.t.success (jquery.form.min.js?v=3.51:11)
at i (jquery.min.js?v=2.2.3:2)
at Object.fireWith [as resolveWith] (jquery.min.js?v=2.2.3:2)
at z (jquery.min.js?v=2.2.3:4)
at XMLHttpRequest. (jquery.min.js?v=2.2.3:4)

Expected behavior

The exposed filters should work just fine even if the entity browser is closed and opened multiple times

For now I wasn't able to find the real cause of this issue, but it's pretty problematic as the view's filters can't be used if the browser is opened twice or more.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

bpresles created an issue. See original summary.

Aghiad’s picture

Any updates about this issue?
I'm having the same error when I use the iFram plugin for the second time.
I think it's a caching issue since It's only working after clearing the website caches.

dark05’s picture

I'm same error with Drupal 8.2.6 and Entity Browser 8.x-1.0-rc1.
Any idea for resolve bug?

slashrsm’s picture

Version: 8.x-1.0-beta3 » 8.x-1.0-rc1
Assigned: bpresles » Unassigned
Priority: Major » Normal
Issue tags: +D8Media

I was not able to reproduce this bug on 8.2.x or 8.4.x. I was using entity_browser_example module and its "Nodes" field on the example content type. I updated the relevant entity browser to use the Modal display and Tabs widget selector.

I also made sure that the render cache was enabled. It could be that something else related to the view is affecting this. Could you provide more info about that aspect? Could you try if you can reproduce on the example module?

dark05’s picture

In my form to create a node, I click on my media field to add an image.
A modal opens containing all the images.
Filters are added to my view which makes it easy to find my image. I enter in the Title Filter "Chiffre" and I get my images starting with that word.
Only local images are allowed.
I add my image to my node.

Now every time I try to add a new image via this field or from another field with the Entity Browser widget, the filters in my view in the modal no longer work.

A error javascript : Uncaught TypeError: Cannot read property 'top' of undefined

jmarcou’s picture

Issue summary: View changes
jmarcou’s picture

I don't think it's related to the JavaScrip error; may be it could help you :

The first time I open the modal, this AJAX response is received after I submitted the filters :

[
	{
		"command": "viewsScrollTop",
		"selector": ".js-view-dom-id-9047...4666"
	},
	{
		"command": "insert",
		"method": "replaceWith",
		"selector": ".js-view-dom-id-9047...4666",
		"data": "
			<div class="view ... js-view-dom-id-9047...4666">
				<div class="view-filters"> ... </div>
				<div class="view-content"> ... </div>
				<nav class="pager"> ... </nav>
			</div>
		",
		"settings": null
	}
]

Which make sens, because the modal js-view-dom-id is "9047...4666" (in the HTML DOM)
But the second time I open the modal, this AJAX response is received after I submitted the filters :

[
	{
		"command": "viewsScrollTop",
		"selector": ".js-view-dom-id-9047...4666"
	},
	{
		"command": "insert",
		"method": "replaceWith",
		"selector": ".js-view-dom-id-9047...4666",
		"data": "
			<div class="view ... js-view-dom-id-9047...4666">
				<div class="view-filters"> ... </div>
				<div class="view-content"> ... </div>
				<nav class="pager"> ... </nav>
			</div>
		",
		"settings": null
	}
]

But doesn't work, because the modal js-view-dom-id has changed to "670e...30c4" (in the HTML DOM)
The UID doesn't match any more.

Rebuilding the cache fix the problem (until you open the modal twice).

P.S:
I just noticed, that the js-view-dom-id is a parameter (view_dom_id) sent into the Form Data of the AJAX request, on which the response is based and the parameter is already wrong at this moment.

P.P.S:
I "re-just-noticed", the js-view-dom-id never changes in the JavaScript even if it changes at each refresh in the HTML DOM. It looks like the JavaScript is cached with the js-view-dom-id parameter at the first load and never get refreshed (until you rebuild the cache).

jmarcou’s picture

Version: 8.x-1.0-rc1 » 8.x-1.0-rc2

Still present on 8.x-1.0-rc2

HnLn’s picture

I've had the same problem, without entity browser though, but with a view in a modal. I created a core issue here: https://www.drupal.org/node/2861860.

ConradFlashback’s picture

+1 in 8.x-1.1