[Bug]: Modals not showing in Chrome

[JuliaEichler]

Expected Behavior

1. Cookie Consent should pop-up automatically
2. Button should open the preferences modal

Current Behavior

Works fine in Safari, doesn't happen in Chrome.

Cookie-Consent

Modal doesn't show on first page load

Preferences modal doesn't show on button click

A. Button does nothing:

The proposed button that's suggested in the documentation
<button type="button" data-cc="show-preferencesModal">Manage cookie preferences</button>
does nothing at all. No error is emitted either.

B. Calling the preferences modal via typescript:

When calling CookieConsent.showPreferences() from the .ts file [CookieService.showSettings() calls CookieConsent.showPreferences();], an error occurs:

privacy-policy.component.html:247 ERROR TypeError: Cannot read properties of undefined (reading 'addEventListener')
at R (cookieconsent.esm.js:7:1793)
at z (cookieconsent.esm.js:7:3050)
at Module.Be (cookieconsent.esm.js:7:18239)
at _CookieService.showSettings (cookie.service.ts:115:19)
at _PrivacyPolicyComponent.showCookieSettings (privacy-policy.component.ts:25:24)
at PrivacyPolicyComponent_Template_a_click_123_listener (privacy-policy.component.html:247:23)
at executeListenerWithErrorHandling (core.mjs:24697:16)
at wrapListenerIn_markDirtyAndPreventDefault (core.mjs:24730:22)
at HTMLAnchorElement. (platform-browser.mjs:749:112)
at _ZoneDelegate.invokeTask (zone.js:402:31)

Steps to reproduce

This happened in previous versions as well. My current setup is as follows:

Angular version 17.1.1
vanilla-cookieconsent version 3.0.0
Browser: Chrome Version 121.0.6167.139
OS: Mac OS 14.3

Doesn't work here either: https://playground.cookieconsent.orestbida.com/

Proposed fix or additional info.

No response

Version

3.0.0

On which browser do you see the issue?

Chrome

[nigeldixon]

I have experienced something similar to the described behaviour. I eventually discovered that I had inadvertently "double-loaded" my initialization script.

I haven't done too much digging yet (mainly because my symptoms have gone away - for now at least), but it appears the Chrome balks when the same event is registered more than once.

[orestbida]

@JuliaEichler did you follow the guide for angular? You need to make sure the plugin is being loaded on the client side only, when the window object is available.

Please provide a minimal reproduction.

Here is an example setup with Angular 17.

[JuliaEichler]

Oh man, I just found out that this error occurs, when VSCode opens a Chrome browser for testing. If I test it directly in my Chrome which has not been opened by VSCode it works.

I must have tested your example in the VSCode Chrome too.

Sorry for your time and thank your for your hints @nigeldixon and @orestbida!

[danielpaul]

Hey @orestbida @JuliaEichler I'm having the same issue. I cannot do automated testing with Chrome with Selenium.

Minimal reproduction:

1. Open Chrome via Selenium
2. Visit the plugin playground and can replicate the issue there also

[danielpaul]

@orestbida @JuliaEichler found the issue. In the config of the plugin, when testing, do hideFromBots = false. The issue was that the modal and other functions were not running in the plugin when it was driven by the web driver which is treated as a "bot" and the default value is to hide it from bots. Maybe in the future can handle this better in the code to not run other event listeners if the modal is not showing for bots.