search

predixdesignsystem / px-data-grid

Predix UI component which defines a data grid
https://www.predix-ui.com/#/elements/px-data-grid
Apache License 2.0
12 stars 20 forks source link

item-action event not working in FF and Edge with Angular (seed-app) #805

Closed abogoslavskyi closed 5 years ago

abogoslavskyi commented 6 years ago

Event is also not declared in -api.json Chrome handles it and works fine, however current implementation seems to be not enough for FF or Edge. The only thing I have found in code is -action-column.html line 252: this.dispatchEvent(new CustomEvent('item-action', { bubbles: true, composed: true, detail: { item: actionItem, action: actionId } }));

evanjd commented 6 years ago

Verified, can reproduce as well. This is not related to Angular, I've set up a simple glitch that demonstrates it.

https://px-data-grid-bug-check.glitch.me/

sebastiantb commented 5 years ago

I can confirm this is happening, anyone from san ramon that can help us fix this?

evanjd commented 5 years ago

@sebastiantb I'll ask for time to fix this next sprint (starting this Thurs).

evanjd commented 5 years ago

Working on this now.

evanjd commented 5 years ago

Quick update:

This looks like it might be an issue with the ShadyDOM polyfill, specifically with composed events. The composed flag should ensure that events propagate through shadow DOM boundaries, but this isn't working reliably.

On Firefox, removing the web components polyfill and enabling native custom elements/shadow DOM support through flags remedies this problem. On Chrome. forcing the ShadyDOM polyfill on causes this same bug to emerge.

Implementing a workaround is simple - I can just dispatch the event at the root px-data-grid/px-data-grid-paginated element. But I'm keen to dig into this a bit more and either address the root cause or get a clean JS fiddle together that reproduces this issue so I can raise an issue on webcomponentsjs.

Either way, I'll raise a PR in the next couple days.

sebastiantb commented 5 years ago

thanks for your help, using shadow dom, will be very expensive and the app runs slow on ie already slow.

We implemented a work around by setting the listener inside the component px-data-grid-action-column, but the resulting query selector is very ugly XD

evanjd commented 5 years ago

v1.0.9 has been released to address this, and I've added tests for this issue (passing everywhere, including IE11). Please reopen if you continue to experience issues after upgrading.