Polymer: cuba-login addEventListener on <slot> fails on Firefox and Edge

Support
#1

Hello there,
Cuba ver. 6.8.8

steps to reproduce:

  • Create polymer module with studio & run
  • Connect to localhost:8080/app-front with Firefox/Edge
  • Insert credentials and then MOUSE-click on Login btn… nothing happens
  • now tab on the btn, press Enter, you should log-in

The problem doesn’t show in Chrome.

I did some research and it looks like you cannot define an event listener on a slot element. The event will not be fired by its children (in Firefox and Edge at least)

Solution:
substitute

ready: function () {
  this.shadowRoot.querySelector('#loginButtonSlot').addEventListener('click', function () {
    this.submit();
    }.bind(this));
},

with

ready: function () {
  this.shadowRoot.querySelector('#loginButtonSlot').assignedNodes()[0].addEventListener('click', function () {
    this.submit();
    }.bind(this));
},

test file:
my-login.html (4.5 KB)

#5

Hello @lucio.rossi75

The problem is related to polyfill and ShadyDOM: GitHub issue.

The only way to solve this is to check which browser is used add add event listener to the button as you do.

Regards,
Daniil.

1 Like