ngx-mask icon indicating copy to clipboard operation
ngx-mask copied to clipboard

mask not working inside web-component

Open artvel opened this issue 3 years ago • 0 comments

Hi @NepipenkoIgor,

I've opened this issue because this mask does not work inside web-component(s). But it is not as bad as it looks like as I already know the cause of the issue.

document.activeElement doesn't behave as usual when using web-components. A loop is necessary to reach the target element.


function docGetActiveElement(){
 let el;
 let target = document;
 while(el = target.activeElement){
  if(el.shadowRoot){
     target = el.shadowRoot;
  } else {
    break;
  }
  return el;
}

Affected lines: https://github.com/JsDaddy/ngx-mask/blob/1443f19fb7105bcb3db55260a20aa36016561b82/projects/ngx-mask-lib/src/lib/mask.service.ts#L161 https://github.com/JsDaddy/ngx-mask/blob/1443f19fb7105bcb3db55260a20aa36016561b82/projects/ngx-mask-lib/src/lib/mask.directive.ts#L331

Implementing this solution does not break the mask when using it without web-components.

I saw the open PR, but it breaks things and it is pending since last year. Maybe this finds a faster way to a valid release :-)

Hope it helps. Cheers

artvel avatar Jan 23 '22 18:01 artvel