ngx-mask
ngx-mask copied to clipboard
mask not working inside web-component
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