Support focus/blur events on SVGElement by promoting those events from HTMLElement to Element

Fixed Issue #8479637

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](http://jsbin.com/kivufo/3/edit?html%2cconsole%2coutput)[http://jsbin.com/kivufo/3/edit?html,console,output](http://jsbin.com/kivufo/3/edit?html%2cconsole%2coutput)

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

    • Microsoft Edge Team

      Changed Assigned To from “Bogdan B.” to “David S.”

      Changed Status from “Confirmed”

      Changed Title from “HTMLElement.blur should be copied to SVGElement.blur -- focus/blur undefined for declared SVGs” to “Support focus/blur events on SVGElement by promoting those events from HTMLElement to Element”

      Changed Title from “Support focus/blur events on SVGElement by promoting those events from HTMLElement to Element” to “Support focus/blur events on SVGElement by promoting those events from HTMLElement to Element”

      Changed Steps to Reproduce

      Changed Steps to Reproduce

      Changed Steps to Reproduce

      Changed Status to “Fixed”

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

    Sign in