search

vmware-archive / clarity

Clarity is a scalable, accessible, customizable, open source design system built with web components. Works with any JavaScript framework, built for enterprises, and designed to be inclusive.
http://clarity.design
MIT License
6.43k stars 762 forks source link

ngx clipboard does not work with clarity wizards and modals #2563

Closed omurbekjk closed 6 years ago

omurbekjk commented 6 years ago

Describe the bug

Ngx clipboard does not work with clarity wizards, on the other hand it works when I used outside of wizard.

How to reproduce

https://stackblitz.com/edit/github-f5rw3v

Install clarity, and ngxclipboard package, use it inside some wizard pages, Sample example: <button (cbOnSuccess) = "textCopied()" ngxClipboard [cbContent]="'THIS IS A TEXT TO COPY">COPY</button></li>

Expected behavior

It should copy text to clipboard. Note, this is not a ngxclipboard issue I think, because it works outside of wizard.

Versions

App

Device:

Shijir commented 6 years ago

@omurbekjk thanks for filing this issue. We will investigate and get back to you soon.

Shijir commented 6 years ago

Ok, so it looks like the bug is not in our Wizard or Modal component. But I would say this issue is more to do with how ngx-clipboard is implemented. Our modal component has a focus trapper. That means the focus will never go outside of a Modal dialog if opened. What ngx-clipboard does is that they create a <textarea> element, append it to the bottom of the document (which would be obviously outside of the modal dialog), and select the <textarea> to copy its content:

https://github.com/maxisam/ngx-clipboard/blob/master/projects/ngx-clipboard/src/lib/ngx-clipboard.service.ts#L65-L69

But as soon as <textarea> gets selected and focused, the focus would be moved back to the modal dialog (by the modal's focus trapper) before ngx-clipboard tries to execute its copy command. So ngx-clipboard won't work properly with any component with focus trapper.

What they should have done instead is to make that <textarea> off-screen and append it right below the ngxClipboard directive element. In that case, the <textarea> element would be still inside the focus trapper.

omurbekjk commented 6 years ago

@Shijir Thank you for your quick response. I am not quite familiar with focus trapper, how should I add <textarea> inside the focus trapper?

Shijir commented 6 years ago

@omurbekjk Unfortunately, I don't see anything you could do on your end to fix this issue. I have notified and filed an issue about this problem in their repo though: https://github.com/maxisam/ngx-clipboard/issues/152

github-actions[bot] commented 4 years ago

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.