'Double-instantiating a menu button on an element' garnish messages in console.log

[Friksel]

Description

Not sure what's triggering this, but obviously something inside 'garnish.js' doesn't quite like something as it's throwing 'Double-instantiating a menu button on an element' in the console log a couple of times.

Just having a simple entry with matrix field on it. No redactor field. No plugin installed. Fresh Craft install.

Not sure when exactly this happens, but this issue is around for quite some time now, but I didn't post it as I had several plugins loaded and don't have the time to debug this. And now I see it happening even on a fresh Craft install without a plugin installed. Looks like it's related to the Matrix block.

Steps to reproduce

1. Make a matrix field
2. Add a new entry and edit the matrix field inside Entries --> Save

Additional info

• Craft version: 3.4.27
• PHP version: 7.1.16
• Database driver & version: MariaDb 10.4.10
• Plugins & versions: none

[brandonkelly]

I have seen that as well from time to time. Generally perfectly safe to ignore though.

[Friksel]

@brandonkelly just for the record: I don't see this from time to time, but regularly. It might be minor, but as a front-end developer it gives, together with other issues I have when running Craft on development environment (many errormessages in the cp which seem to appear if a user is clicking something in the CP when something is being saved or something), and issues I've seen like something is called before being initialised, together the feeling the front-end of the CP isn't really stable.
Also having all these things in the console isn't nice for customers that are having some technical skill and open up the dev tools.
Which I am surprised about, as Craft in general feels so well thought through and is so fun to use and I love it.

If I would have more information on when these issues especially appear I tell you.

[brandonkelly]

@Friksel Are you seeing any actual unexpected behavior? Or just concerned about the various console logs/warnings/errors?

It’s expected you’d get an error logged if you leave a page mid-Ajax request.

[Friksel]

@brandonkelly Thanks for your quick response. Just a quick reaction as I'm having some deadlines now; I see actual unexpected behaviour AND am concerned about the various console logs/warnings/errors.

Can't really point my finger on it when exactly this happens to create an issue about it helping you guys to look into it (if I have a little more time I dive deeper into this and do some specific testing), but it looks like it's especially happening on a little slower environments, like the dev-environment I'm working on. Although not all issues are. Sometimes it just feels random.
For the record: the system is not running out of max_timing/memory or whatever.

If I know more I let you know as I'd like to solve this as much as you do as this doesn't feel nice when using a CMS.
I'm hoping though we don't have to tell customers to wait for ajax requests to finish or else something... because I don't think that's something a customer should be concerned about.

[Friksel]

No response after a week, still no fix and also here: you don't take issues seriously. I might be 'Just' concerned about the console errors??? YOU should be concerned about them. This is your product and it's full of bugs.

I'm done with Craft.

I put my reaction here: #6434 (comment)

[brandonkelly]

I do want to address the console warnings, though I’m certain they are unrelated to the actual issues you’re seeing.

[dgrigg]

This looks like it hasn't been resolved. I'm having similar issues in the control panel with custom element types. For the most part it doesn't cause an issue EXCEPT with Matrix fields. If the custom element has a Matrix field in it's field layout the issue causes Matrix blocks to be added multiple times when clicking the '+ [block type]' button in the Matrix field. The error is showing it's coming in garnish.js line 220 which unfortunately appears to be a generic log function.

Any insight you have into how to solve this would be greatly appreciated as it's causing big user experience issues within some custom Craft module development I'm working on.

[dgrigg]

To add to this, the additional matrix blocks that get created when click the '+ [block type]' button have no interactivity attached to the them, any fields (ie entry/asset selectors) are none responsive to clicks.

Also, in the first matrix block that gets created, clicking the relationship field seems to create multiple modal window instance to select an element from. If the field has a limit of 1 element the expected behaviour would be for the window to close after selecting an element, however because two matrix blocks were created the modal window waits until a second element is selected before closing.

[brandonkelly]

@dgrigg Sounds like maybe the Matrix JS is getting initialized twice, somehow. Do you have any custom JS added via the CP JS plugin or something like that? Any plugins that may be interfering?

[dgrigg]

@brandonkelly it turned out the fieldLayout was calling the createForm() method twice, once in the controller and once in the twig template. That double call was creating the script block twice where the Matrix blocks are output to be referenced when clicking the 'add' button for the Matrix field.

Unfortunately it was a really odd thing to track down. I needed to call the createForm method in the controller to access the tabs before they were created in twig (which was extending the _layouts/element, where the same call was included). Not sure if that's the intended case that it would double up (or more) based on subsequent calls in the same request. Maybe something to look at in the future.

[brandonkelly]

@dgrigg If this is for a custom edit form template, you could pass the created form down to the template, rather than calling createForm() twice.

[dgrigg]

@brandonkelly that was the issue, it was called once in the controller and once in the template (the templates/_layouts/element.twig) my template was extending.

[jamiematrix]

I know this is old, but I've just seen the same problem on a 3.6 site. It was happening on the homepage entry in the CP. The homepage has 4 tabs, 3 out of the 4 would display find but the remaining one (it was in the middle) wouldn't display the fields. The HTML was there - it just wasn't removing the hidden class.

The tab that was given problems is called "Tab Content". I found that naming it to "Tab Contents" would display the fields - it seems having it set to "Tab Content" would keep the fields hidden. This was happening on a live server, a dev server, and local hosts.

[brandonkelly]

@jamiematrix Thanks for reporting that. That particular scenario is now fxed for the next release (489db2a).

[stevecomrie]

I also know this is an old bug report, but I think I've narrowed down a couple more causes for this bug.

I've found that I get this bug if I have two separate matrix fields on the same entry page.

It seems to occur regardless of whether or not any of the matrix fields have blocks added to them, and it also doesn't appear to matter whether or not any of the individual block types share a handle. Just having two (or more) matrix fields will cause the problem.

One matrix field -> no warnings
Two matrix fields -> 2 console warnings
Three matrix fields -> 3 console warnings

Maybe this is related to the "Add a Block" combobox / listbox button that appears below the matrix field if your screen width is too small to display all the available blocks as individual buttons.

Also .. if one of your blocks contains a Supertable field (and that field is set to display "as a matrix"), it appears that you get one additional warning message for every row in the Super Table field per matrix block on your page.

Not sure what that's related to specifically, but since it's one warning per row, my best guess would be something like the settings or move icon? Since this second error only appears to be occurring in conjunction with Supertable, it might not be yours to solve, but I figured that more information couldn't hurt.

Currently running v4.2.7

[LucyRa]

I'm also having this issue on a project running 3.5.19.1 - the message in the console log only appears on entries that have matrix fields, but once on those entries any fields within the matrix field that call js are completely non-functional (meaning that entries can't be added/edited). This also effects things like being able to add a parent to a structure entry, or even just close the matrix field blocks settings drop-down menu.

When attempting to click on the now completely unresponsive elements, the following is logged into the console:

Uncaught TypeError: Right-hand side of 'instanceof' is not an object
    at s.constructor.trigger (garnish.js:838:17)
    at s.constructor.updateSizeAndPosition (garnish.js:4360:18)
    at s.constructor.show (garnish.js:4234:22)
    at s.constructor.show (BaseElementSelectorModal.js:150:1)
    at s.constructor.e [as show] (garnish.js:79:31)
    at s.constructor.init (garnish.js:4179:26)
    at s.constructor.init (BaseElementSelectorModal.js:34:1)
    at s.constructor.e [as init] (garnish.js:79:31)
    at s.constructor.constructor (garnish.js:768:19)
    at s.constructor (garnish.js:40:17)```
    
    

[brandonkelly]

Finally got around to looking into this, and it’s now fixed for the next Craft 3 and 4 releases.

[brandonkelly]

3.8.10 and 4.4.10 are out with the fix.

[my2ter]

@brandonkelly

Thanks for looking into this and fixing it.

I'd say though that it would be good to also fix this in prior versions. Understand supporting older version has dropped but not every app can be/have the opportunity to be upgraded to the latest, and it was reported on 3.4.

But again understand if that's not your priority.

[brandonkelly]

@my2ter We fixed in in 3.8.10. You shouldn’t have any issue updating from 3.4 to 3.8.

[my2ter]

Hmm maybe with vanilla Craft.. But it's not that simple with certain type of live site, also not every client is wanting to upgrade for many different reasons.

Anyway, was just a suggestion understand you've got better things to do with Craft 4 and 5.

Thanks for taking the time to respond.