search

PolymerElements / iron-overlay-behavior

Makes an element an overlay with an optional backdrop
41 stars 71 forks source link

IronFocusablesHelper.getTabbableNodes fails if there is a SVGElement on IE11 #283

Open DiegoCardoso opened 6 years ago

DiegoCardoso commented 6 years ago

Description

This issue was found while using vaadin-dialog. The dialog component uses IronFocusablesHelper.getTabbableNodes to trap tab selection to the element inside of it when opened. We found out that in IE11, one of the examples wasn't preventing the selection to go outside of the dialog.

It turns out that the reason for that was that the dialog has one SVGElement inside of it.

On IE11, SVGElement#children returns undefined instead of an empty HTMLCollection, so on this line https://github.com/PolymerElements/iron-overlay-behavior/blob/master/iron-focusables-helper.html#L136, children.length fails with "Unable to get property 'length' of undefined or null reference".

Expected outcome

Focusable elements are returned on IE11.

Actual outcome

Error is thrown and no execution is stopped.

Example Project

iron-focusables-issue.zip

Steps to reproduce

  1. Download and run the example project
  2. Open IE11 and its devtools
  3. Click on Print focusable items button on top of the page.
    • [ ] Chrome
    • [ ] Firefox
    • [ ] Safari 9
    • [ ] Safari 8
    • [ ] Safari 7
    • [ ] Edge
    • [X] IE 11
    • [X] IE 10 (maybe?)