From 8636f77d3455de4c3f856ba0954b9736fd0ccc65 Mon Sep 17 00:00:00 2001
From: Cecilia Avila <cecilia.avila@southworks.com>
Date: Thu, 7 Nov 2019 11:51:31 -0300
Subject: [PATCH] Manage tabIndex attribute for hidden TextFields

---
 .../endpointExplorer/endpointEditor/endpointEditor.tsx   | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/app/client/src/ui/shell/explorer/endpointExplorer/endpointEditor/endpointEditor.tsx b/packages/app/client/src/ui/shell/explorer/endpointExplorer/endpointEditor/endpointEditor.tsx
index 39cf6e3ce..72ac02d7c 100644
--- a/packages/app/client/src/ui/shell/explorer/endpointExplorer/endpointEditor/endpointEditor.tsx
+++ b/packages/app/client/src/ui/shell/explorer/endpointExplorer/endpointEditor/endpointEditor.tsx
@@ -192,12 +192,14 @@ export class EndpointEditor extends Component<EndpointEditorProps, EndpointEdito
                 data-prop="serviceName"
                 value={serviceName}
                 label="Azure BotId"
+                tabIndex={-1}
               />
               <TextField
                 onChange={this.onBotInputChange}
                 data-prop="tenantId"
                 value={tenantId}
                 label="Azure Directory ID"
+                tabIndex={-1}
               />
             </Row>
             <Row className={styles.absTextFieldRow}>
@@ -206,12 +208,14 @@ export class EndpointEditor extends Component<EndpointEditorProps, EndpointEdito
                 value={subscriptionId}
                 data-prop="subscriptionId"
                 label="Azure Subscription ID"
+                tabIndex={-1}
               />
               <TextField
                 data-prop="resourceGroup"
                 onChange={this.onBotInputChange}
                 value={resourceGroup}
                 label="Azure Resource Group"
+                tabIndex={-1}
               />
             </Row>
           </div>
@@ -303,6 +307,11 @@ export class EndpointEditor extends Component<EndpointEditorProps, EndpointEdito
     const newHeight = expanded ? clientHeight : 0;
     this.absContent.style.height = `${newHeight}px`;
     currentTarget.setAttribute('aria-expanded', expanded + '');
+    this.absContent.querySelectorAll('input').forEach((node: HTMLElement) => {
+      if (node.hasAttribute('tabIndex')) {
+        node.setAttribute('tabIndex', expanded ? '0' : '-1');
+      }
+    });
   };
 
   private absContentRef = (ref: HTMLDivElement): void => {