asked on November 18, 2019
Hello Flexmonster Team,
We are using Flexmonster inside Shadow DOM, recently we identified an issue with click event is not being triggered from fm-ui-dropdown element.
Any suggestion for it?
⋅ November 18, 2019
Hello,
Thank you for reaching out to us.
To understand the situation better, our team kindly asks you to provide more details on your case:
1) Please explain more about how you are using Flexmonster inside Shadow DOM
2) Please provide more information regarding the issue with the click event: which dropdown element fails to work?
In addition, any screenshots, illustrations, code examples are greatly appreciated.
Waiting for your reply.
Best Regards,
Vera
⋅ November 19, 2019
Hello Flexmonster Team,
Thanks for reply.
Here providing details on query raised in previous post -
We are using Flexmonster in our Angular application and that has been integrated using Angular module : ng-flexmonster
In angular component where flexmonster directive is used that component is being added to Shadow DOM, so that Flexmonster CSS encapsulated with that particular component only and should not disturb any other UI elements
For this encapsulation used as ViewEncapsulation.Native as below :
@Component({
selector: 'fm-component',
template: `
<fm-pivot [licenseKey]="'XXXX-XXXX-XXXX-XXXX-XXXX'" [report]="'https://cdn.flexmonster.com/reports/report.json'"></fm-pivot>
`,
encapsulation: ViewEncapsulation.Native
})
class FmComponent {
}
Attached images where issue is occurring while click on drop down - UI and DOM snippet
Hope this much details would be sufficient for query resolution.
⋅ November 20, 2019
Hello,
Thank you for providing further details regarding your case.
It helped a lot to understand the situation better.
We have managed to reproduce the issue.
Our team will provide the fix for this in the minor release version with the ETA 16th of December.
Please let us know if you have any questions.
Best Regards,
Vera
⋅ December 17, 2019
Hello,
We are glad to inform you that several UI issues when using Flexmonster inside Shadow DOM were fixed.
This is available in the 2.7.21 version of Flexmonster: https://www.flexmonster.com/release-notes/
You are welcome to update the component: https://www.flexmonster.com/doc/updating-to-the-latest-version/
Please let us know if everything works.
Best Regards,
Illia