Posted by prevoj on Fri, Jul 08, 2022 - 11:21am --- Updated: Jul 08 '22 - 1:52pm

I have 4 backdrop sites all running on one backdrop instance (obviously using multi-site). Two sites have an issue when you go to Functionality>List Modules the "more" link will not expand to show dependencies. The other two sites work fine.

I have looked and looked between the four sites and can't figure out anything that could be causing this. There's not a particular module that's different between them. All modules are shared so there aren't version differences. I've used the Chrome developer console to look for errors, etc. I've tried searching extensively and can't find an answer here or on the Internet.

Any help would be greatly appreciated as I am getting very tired of inspecting the source code and turning off the display:none on the div so I can see the dependencies. I'm sure it's related to JavaScript somehow because that is what must be flipping the display:none and more/less labels but I just can't narrow it down any further than that.

Thanks!

Joe Prevo

Accepted answer

With your workaround, I was able to more easily enabIe and disable various modules. The problem is the EU Cookie Compliance module. When I disabled it on my site, more/less worked again. When I enabled it on another site where more/less worked, it stopped working. So I will report the issue to the EU Cookie Compliance maintainer(s).

Thanks for all your help argiepiano!

Comments

Fri, Jul 08, 2022 - 3:29pm by argiepiano

That sounds like a very strange and annoying problem. I was going to guess that there is an issue when adding the JS library in charge of toggling the element (/core/modules/system/js/modules.js), but you are saying that the toggle works in some sites. 

This is just guessing and throwing ideas:

  • Clear caches a couple of time, then navigate to the page and try again (you've probably done this already)
  • Go to admin/config/development/performance to see if Javascript is being aggregated. Compare all sites. Disable js aggregation and clear caches, then try again
  • Check the console for js errors. Sometimes js errors can cause the whole script not to run at all
  • After disabling aggregation, navigate to Functionality -> List modules. Then open Chrome's development console and click on the Sources tab. There, expand the folders core/modules/system/js. Check to verify that modules.js is listed among those scripts (see image). You will only see it if js aggregation is disabled, and if it's being loaded 
  • After the last step above, try clicking the toggle again. If it's not working, try manually attaching the behavior by typing the following in the Chrome console: 

Backdrop.behaviors.moduleFilter.attach()

Then try clicking the toggle again.

One thing I've noticed is that if the behavior is attached twice, then the toggle seems to not work - what happens is that the function is run twice when you click, and the toggle is opened and closed in super fast succession, so it seems not to work. You can see this happening if you insert a breakpoint in the Chrome console Sources within the function that opens and closes the div (line 20 of modules.js).

I think this last issue is probably the best candidate. Somehow, the behavior is being attached twice for some sites. Not sure why. 

Feel free to try and post more questions.

 

Sat, Jul 09, 2022 - 7:20pm by prevoj

There are no JS errors in the console. I did not have js aggregation on and I could see system/js/modules.js in the sources. I tried all the combinations I could come up with clearing caches, enabling/disabling js aggregation, etc. from your suggestions but couldn't find anything that helped except...

I can manually run Backdrop.behaviors.moduleFilter.attach() and that enables the more/less functionality until the page reloads, of course. So at least I have a better workaround for now that is much less painful than what I was previously doing.

If you can think of anything else based on this info, I would be very grateful. I will also continue to investigate. I've done some Drupal and Backdrop CMS development (a couple simple modules, sub-themes, and layouts) but I don't have any in-depth knowledge of either core. If I find something, I will definitely come back and mention it here to help anyone else that might encounter this situation. 

Sat, Jul 09, 2022 - 8:03pm by prevoj

With your workaround, I was able to more easily enabIe and disable various modules. The problem is the EU Cookie Compliance module. When I disabled it on my site, more/less worked again. When I enabled it on another site where more/less worked, it stopped working. So I will report the issue to the EU Cookie Compliance maintainer(s).

Thanks for all your help argiepiano!

Sat, Jul 09, 2022 - 8:29pm by argiepiano

I'm glad you found the source of the problem. The maintainer of EU Cookie Compliance is not currently active - many of his modules haven't been updated in a while, but perhaps one of the main committers can follow through. I took a quick look and I can't figure out what in that module may be interfering with the toggle. The toggle, as far as I can tell, doesn't use cookies to store anything. So the issue may be css or something else. 

One thing you may want to do before reporting is to check whether the issue is that the toggle click listener is not attached at all, or if it is attached twice. As I mentioned, if it's attached twice, the toggle seems not to work. To test you can use the dev tools to add a breakpoint in line 20 of modules.js. Then reload the page, and see how many times it reaches that breakpoint. The breakpoint will persist, so be sure to remove it once you are done testing. 

It may be possible (in fact, advisable) to use jQuery.once in modules.js to attach that listener. I'm surprised it's not being used. jQuery.once prevents listeners from being attached more than once, which always causes problems. It may be worth opening an issue in the main Backdrop queue regarding this, IF you find out that the listener is being attached more than once.

Sat, Jul 09, 2022 - 8:31pm by argiepiano

(BTW, when I say the dev tools, I mean the Chrome dev tools, using the Sources tab to open modules.js and adding that breakpoint there)

Sat, Jul 09, 2022 - 9:12pm by argiepiano

(Correction: I meant to say to click the toggle after the breakpoint is added, to see if its callback function is invoked more than once) 

Sat, Jul 09, 2022 - 9:16pm by argiepiano

I just tried this myself. Installed EU Cookie Compliance, and have reproduced the issue. I also checked, and the callback is invoked twice, as suspected. So, this listener is being attached twice.

I'll open an issue both in EU Cookie Compliance and the main queue 

Sat, Jul 09, 2022 - 9:17pm by argiepiano

I see you already opened one at the module. I'll add a couple comments there.