HTMLElement.blur should be copied to SVGElement.blur -- focus/blur undefined for declared SVGs

Confirmed Issue #8479637 • Assigned to Bogdan B.

Details

Author
valdrin k.
Created
Aug 12, 2016
Privacy
This issue is public.
Reports
Reported by 2 people

Sign in to watch or report this issue.

Steps to reproduce

In MS Edge and MS 11, declared SVGs don’t have focus/blur methods defined, while imperatively declare SVGs do (document.createElement(‘svg’))

http://jsbin.com/kivufo/3/edit?html,console,output

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Ibrahim O.”

      Changed Assigned To to “Travis L.”

      Changed Assigned To to “Bogdan B.”

      Changed Title from “focus/blur undefined for declared SVGs” to “HTMLElement.blur should be copied to SVGElement.blur -- focus/blur undefined for declared SVGs”

    • Thanks for reaching out to us. This a known issue. Initially, no browser supported those but over time support grew to fix webcompat issues and it seems we are left being the only not having done the change already. We will, at some point.

    • Microsoft Edge Team

      Changed Status to “Confirmed”

      • Edge14 already supports the tabindex attribute on SVG elements
      • SVG2 - which covers focus management - is now Candidate Recommendation -
      • Firefox 51 will support the tabindex attribute and focus/blur methods on SVG elements (778654). that leaves Microsoft Edge as the last non-supporting browser.

      Note that the reason the “imperatively created SVG element” has the focus/blur methods is because it isn’t an SVGElement, but an HTMLUnknownElement, because it was created without the appropriate namespace.

      String(document.createElement('svg'));
      // "[object HTMLUnknownElement]"
      
      String(document.createElementNS('http://www.w3.org/2000/svg', 'svg'));
      // "[object SVGSVGElement]"
      
    • This seems to do the trick

      SVGSVGElement.prototype.focus = SVGSVGElement.prototype.focus || HTMLElement.prototype.focus;
      SVGSVGElement.prototype.blur = SVGSVGElement.prototype.blur || HTMLElement.prototype.blur;

      http://jsbin.com/teqatuz/5/edit?html,console,output

    • Using HTMLElement's focus on SVGElements works in IE10, IE11, and Edge12. But Edge13 and Edge14 (following Gecko’s behavior) throw an error stating invalid invocation [1]. I would have posted the error message, but for some absurd reason it’s in German…

    • I’ve found a hack to shift focus to SVG elements by script that works in Edge13 - Edge15: https://allyjs.io/tutorials/focusing-in-svg.html#the-focus-svg-element-hack

    You need to sign in to your Microsoft account to add a comment.

    Sign in