Add on-focusin to Next, Back and Complete paper-buttons

Addresses this issue: Tangerine-Community/Tangerine#2342 Workaround for this issue in paper-button PolymerElements/paper-button#24
Tangerine-Community · Sep 16, 2020 · d92cef0 · d92cef0
1 parent f8e89ad
commit d92cef0
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 6 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -665,6 +665,42 @@ <h3>Tangy partial date</h3>
         </template>
       </demo-snippet>
 
+      <div class="vertical-section-container centered">
+        <h3>Multi-section input with with radio button to enable optional text entry</h3>
+        <demo-snippet>
+            <template>
+                <tangy-form id="form_id" title="Form Title" category="null" on-open="" exit-clicks="" on-change=""
+                    on-submit="">
+                    <tangy-form-item id="item_4271b37a-a953-471b-98e3-7161456fd129" title="Introduction" on-open=""
+                        on-change="" category="null">
+                        <template>
+                            <tangy-box name="intro" class="" style="">
+                                <div
+                                    style="border: 1px black solid; margin:10px 10px 10px 0px; padding:10px 10px 10px 10px; background-color:var(--tangy-select-background-color, rgba(0, 0, 0, 0.04));">
+                                    Open this form
+                                </div>
+                            </tangy-box>
+                        </template>
+                    </tangy-form-item>
+                    <tangy-form-item id="section_092007403cc447c58e79f702d4c3102d" title="Details"
+                        incorrect-threshold="undefined" on-open="" on-change="" category="null">
+                        <template>
+                            <tangy-radio-buttons name="DVDECOD" required="" question-number="" label="Deviation:"
+                                hint-text="" error-text="" warn-text="" class="" style="">
+                                <option value="1">Selection</option>
+                                <option value="88">Other</option>
+                            </tangy-radio-buttons>
+                            <tangy-input type="text" allowed-pattern="" inner-label="" name="DVTERM" required=""
+                                question-number="" label="Specify" hint-text="" show-if="getValue('DVDECOD')==='88'"
+                                error-text="" warn-text="" class="" style=""></tangy-input>
+                        </template>
+                    </tangy-form-item>
+                    <tangy-form-item id="section_0316a6405a9f4b6fbf99a2901d9f8471" title="Form Review "
+                        incorrect-threshold="undefined" on-open="" on-change="" category="null">
+                    </tangy-form-item>
+                </tangy-form>
+            </template>
+        </demo-snippet>
     </div>
   </body>
 </html>
diff --git a/tangy-form-item.js b/tangy-form-item.js
@@ -215,12 +215,12 @@ export class TangyFormItem extends PolymerElement {
           <template is="dom-if" if="{{open}}">
             <template is="dom-if" if="{{rightToLeft}}">
               <template is="dom-if" if="{{showCompleteButton}}">
-                <paper-button id="complete" on-click="clickedComplete" style="float:left">
+                <paper-button id="complete" on-click="clickedComplete" on-focusin="clickedComplete" style="float:left">
                   [[t.submit]]
                 </paper-button>
               </template>
               <template is="dom-if" if="{{!hideNextButton}}">
-                <paper-button id="back" on-click="next" >
+                <paper-button id="back" on-click="next" on-focusin="back">
                   <template is="dom-if" if="{{!hideNavIcons}}">
                     <iron-icon icon="arrow-back"></iron-icon>
                   </template>
@@ -230,7 +230,7 @@ export class TangyFormItem extends PolymerElement {
                 </paper-button>
               </template>
               <template is="dom-if" if="{{!hideBackButton}}">
-                <paper-button id="next" on-click="back" >
+                <paper-button id="next" on-click="back" on-focusin="back">
                  <template is="dom-if" if="{{!hideNavLabels}}">
                     [[t.back]]
                   </template>
@@ -242,7 +242,7 @@ export class TangyFormItem extends PolymerElement {
             </template>
             <template is="dom-if" if="{{!rightToLeft}}">
               <template is="dom-if" if="{{!hideBackButton}}">
-                <paper-button id="back" on-click="back" >
+                <paper-button id="back" on-click="back" on-focusin="back">
                   <template is="dom-if" if="{{!hideNavIcons}}">
                     <iron-icon icon="arrow-back"></iron-icon>
                   </template>
@@ -252,7 +252,7 @@ export class TangyFormItem extends PolymerElement {
                 </paper-button>
               </template>
               <template is="dom-if" if="{{!hideNextButton}}">
-                <paper-button id="next" on-click="next" >
+                <paper-button id="next" on-click="next" on-focusin="next">
                  <template is="dom-if" if="{{!hideNavLabels}}">
                     [[t.next]]
                   </template>
@@ -262,7 +262,7 @@ export class TangyFormItem extends PolymerElement {
                 </paper-button>
               </template>
               <template is="dom-if" if="{{showCompleteButton}}">
-                <paper-button id="complete" on-click="clickedComplete" style="float:right" >
+                <paper-button id="complete" on-click="clickedComplete" on-focusin="clickedComplete" style="float:right" >
                   [[t.submit]]
                 </paper-button>
               </template>