angular-ui/ui-mask

ui-mask in shadow dom

Opened this issue · 0 comments

Hello.
I know it can sound weird, but i need to use ui-mask in shadow dom.
I use web components spec and i created component that wraps angular app
pls take a look at this plunkr (works in chrome)
https://plnkr.co/edit/N4j9R2ZhTYNKAyZBa7E6?p=preview]

The problem here I find is at line 64 of mask.js document.activeElement now points to wrong element (custom element in this case, not an input element)

I found a solution as mentioned in this article https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom

function deepActiveElement() {
   var a = document.activeElement;
   while (a && a.shadowRoot && a.shadowRoot.activeElement) {
     a = a.shadowRoot.activeElement;
   }
   return a;
}
function isFocused (elem) {
  return elem === deepActiveElement() && 
             (!document.hasFocus || document.hasFocus()) && 
             !!(elem.type || elem.href || ~elem.tabIndex);
}

this fix may solve the problem.

Will you consider using ui-mask in shadow dom ?