Dynamically enabled items aren't included in tab order for modal overlays

[dpaul]

Description

If I have a paper-button on an overlay that starts out disabled but becomes enabled while the overlay is shown, that button cannot be tabbed to. This was working in version 1.7.2, commit 0680975 seems the likely culprit

Expected outcome

I should be able to tab to the item.

Actual outcome

I can't tab to the item.

Live Demo

http://jsbin.com/foxosogusu/2/edit?html,console,output

Steps to reproduce

See above.

Browsers Affected

chrome

[valdrinkoshi]

Also with v1.7.2, after enabling the Ok button, the focus wouldn't wrap http://jsbin.com/zakuni/1/edit?html,output

In v1.7.2, iron-overlay-behavior would search for the focusable elements when its children changed (before the paper-button would be disabled). In the latest version, this search is done when the overlay is fully opened (right before sending iron-overlay-opened).

There is already an effort going on to separate the focus wrapping/trapping into a separate behavior (see #179), and in PR #178 I'm updating iron-overlay-behavior to use this new behavior. Once merged, you'll be able to set the first/last focusable like this: http://jsbin.com/zanene/5/edit?html,output

[freshp86]

cc: @danbeam

I am facing the same problem in Chrome's Polymer settings (see https://bugs.chromium.org/p/chromium/issues/detail?id=623907#c3). Specifically we have a dialog with a "submit" button that is disabled initially, and it only gets enabled after the user fills in some text inputs. The button is not reachable via TAB key. See example at https://jsfiddle.net/944v704y/1/. Probably a regression from 1216db4.

[valdrinkoshi]

This has been fixed by introducing a new method, invalidateTabbables() to invalidate the tabbable elements. You'll have to call overlay.invalidateTabbables() right after the state of your focusable elements changes.