From 30f08582ed115b8d2cf5b84310930c9be5552766 Mon Sep 17 00:00:00 2001
From: "Keith J. Grant" <barkeep@keithjgrant.com>
Date: Wed, 7 Apr 2021 14:57:05 -0700
Subject: [PATCH] add id to code editor input fields

---
 awx/ui_next/src/components/CodeEditor/CodeEditor.jsx   | 10 +++++++---
 .../src/components/CodeEditor/VariablesField.jsx       |  3 ++-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/awx/ui_next/src/components/CodeEditor/CodeEditor.jsx b/awx/ui_next/src/components/CodeEditor/CodeEditor.jsx
index fac99894f4..501ece5bdb 100644
--- a/awx/ui_next/src/components/CodeEditor/CodeEditor.jsx
+++ b/awx/ui_next/src/components/CodeEditor/CodeEditor.jsx
@@ -96,11 +96,15 @@ function CodeEditor({
   useEffect(
     function removeTextareaTabIndex() {
       const editorInput = editor.current.refEditor?.querySelector('textarea');
-      if (editorInput && !readOnly) {
+      if (!editorInput) {
+        return;
+      }
+      if (!readOnly) {
         editorInput.tabIndex = -1;
       }
+      editorInput.id = id;
     },
-    [readOnly]
+    [readOnly, id]
   );
 
   const listen = useCallback(event => {
@@ -144,7 +148,7 @@ function CodeEditor({
           value={value}
           onFocus={onFocus}
           onBlur={onBlur}
-          name={id || 'code-editor'}
+          name={`${id}-editor` || 'code-editor'}
           editorProps={{ $blockScrolling: true }}
           fontSize={16}
           width="100%"
diff --git a/awx/ui_next/src/components/CodeEditor/VariablesField.jsx b/awx/ui_next/src/components/CodeEditor/VariablesField.jsx
index ed56f5376c..dba241e428 100644
--- a/awx/ui_next/src/components/CodeEditor/VariablesField.jsx
+++ b/awx/ui_next/src/components/CodeEditor/VariablesField.jsx
@@ -167,7 +167,7 @@ function VariablesFieldInternals({
             <label htmlFor={id} className="pf-c-form__label">
               <span className="pf-c-form__label-text">{label}</span>
             </label>
-            {tooltip && <Popover content={tooltip} id={id} />}
+            {tooltip && <Popover content={tooltip} id={`${id}-tooltip`} />}
           </SplitItem>
           <SplitItem>
             <MultiButtonToggle
@@ -210,6 +210,7 @@ function VariablesFieldInternals({
         )}
       </FieldHeader>
       <CodeEditor
+        id={id}
         mode={mode}
         readOnly={readOnly}
         {...field}