CODEWITHSUNDEEP
javascripthtmlpolymerpolymer-1.0
Roy
Roy

Reputation: 533

Polymer v1.2.4 - Able to tab/shift-tab to background buttons in case of backdrop element

I have upgraded my app from Polymer v0.5 to v1.2.4 and I have a paper-dialog element in the index.html page of my app. Also, I have a paper-buttonpresent in the same page. 

<body>
    <paper-button raised>view items</paper-button>
    <paper-dialog id="agreement_dialog" modal>
          Do you agree to proceed ?
          <paper-button raised on-click="agreementAccepted" autofocus>
            I  Agree
          </paper-button>
          <paper-button raised on-click="agreementDeclined">
            I Decline
          </paper-button>
    </paper-dialog>
</body>

Now, the issue is when agreement_dialog dialog is opened with backdrop, still the user is able tab/shift-tab to the button behind the backdrop i.e. <paper-button raised>view items</paper-button>

Is there a way to restric this behaivour in Polymer v1.2.4 because in v0.5 this was not the case.

NOTE: If is set the tabindex of the view items paper-button to -1, then it works find, but this is kind of hackish, because I have many other buttons and icon-buttons for which I need to set the tabindex = -1 for each element.

Upvotes: 0

Views: 108

Answers (1)

miyamoto
miyamoto

Reputation: 1540

Looks like your best bet is to use the with-backdrop attribute on paper-dialog inherited from iron-overlay-behavior. For more complicated cases, it might require messing with _focusableNodes getter from iron-overlay-behavior.

paper-dialog: withBackdrop

iron-overlay-behavior:

Set the with-backdrop attribute to display a backdrop behind the overlay. The backdrop is appended to <body> and is of type <iron-overlay-backdrop>. See its doc page for styling options. In addition, with-backdrop will wrap the focus within the content in the light DOM. Override the _focusableNodes getter to achieve a different behavior.

Upvotes: 0

Related Questions