From ab2c0fd1c69ba111c2ed6ddffbf2f5a77c0d257c Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Wed, 1 Apr 2020 20:08:18 +0530
Subject: [PATCH 1/3] used keyOF

---
 src/components/code_editor/code_editor.tsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/components/code_editor/code_editor.tsx b/src/components/code_editor/code_editor.tsx
index 41fe15a9364..6ec264f3408 100644
--- a/src/components/code_editor/code_editor.tsx
+++ b/src/components/code_editor/code_editor.tsx
@@ -2,6 +2,7 @@ import React, { Component, AriaAttributes, KeyboardEventHandler } from 'react';
 import classNames from 'classnames';
 import AceEditor, { IAceEditorProps } from 'react-ace';
 
+import { keysOf } from '../common';
 import { htmlIdGenerator, keyCodes } from '../../services';
 import { EuiI18n } from '../i18n';
 
@@ -46,11 +47,13 @@ export interface EuiCodeEditorProps
    * Use string for a built-in mode or object for a custom mode
    */
   mode?: IAceEditorProps['mode'] | object;
+  id?: string;
 }
 
 export interface EuiCodeEditorState {
   isHintActive: boolean;
   isEditing: boolean;
+  name: string;
 }
 
 export class EuiCodeEditor extends Component<
@@ -64,6 +67,7 @@ export class EuiCodeEditor extends Component<
   state: EuiCodeEditorState = {
     isHintActive: true,
     isEditing: false,
+    name: htmlIdGenerator()(),
   };
 
   idGenerator = htmlIdGenerator();
@@ -158,6 +162,19 @@ export class EuiCodeEditor extends Component<
     if (this.isCustomMode()) {
       this.setCustomMode();
     }
+    const { isReadOnly, id } = this.props;
+
+    const textareaProps: {
+      id?: string;
+      readOnly?: boolean;
+    } = { id, readOnly: isReadOnly };
+
+    const el = document.getElementById(this.state.name);
+    const textarea = el!.querySelector('textarea');
+
+    keysOf(textareaProps).forEach(key => {
+      if (textareaProps[key]) textarea!.setAttribute(key, textareaProps[key]);
+    });
   }
 
   componentDidUpdate(prevProps: EuiCodeEditorProps) {
@@ -260,7 +277,7 @@ export class EuiCodeEditor extends Component<
           // Setting a default, existing `mode` is necessary to properly initialize the editor
           // prior to dynamically setting a custom mode (https://github.com/elastic/eui/pull/2616)
           mode={this.isCustomMode() ? DEFAULT_MODE : (mode as string)} // https://github.com/securingsincity/react-ace/pull/771
-          name={this.idGenerator()}
+          name={this.state.name}
           theme={theme}
           ref={this.aceEditorRef}
           width={width}

From 35fc896da32ad447a09c78ce8a1011094f216594 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Wed, 1 Apr 2020 23:04:47 +0530
Subject: [PATCH 2/3] fixed linting errors

---
 src/components/code_editor/code_editor.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/code_editor/code_editor.tsx b/src/components/code_editor/code_editor.tsx
index 6ec264f3408..2fafafea751 100644
--- a/src/components/code_editor/code_editor.tsx
+++ b/src/components/code_editor/code_editor.tsx
@@ -170,11 +170,14 @@ export class EuiCodeEditor extends Component<
     } = { id, readOnly: isReadOnly };
 
     const el = document.getElementById(this.state.name);
-    const textarea = el!.querySelector('textarea');
-
-    keysOf(textareaProps).forEach(key => {
-      if (textareaProps[key]) textarea!.setAttribute(key, textareaProps[key]);
-    });
+    if (el) {
+      const textarea = el.querySelector('textarea');
+      if (textarea)
+        keysOf(textareaProps).forEach(key => {
+          if (textareaProps[key])
+            textarea.setAttribute(`${key}`, textareaProps[key]!.toString());
+        });
+    }
   }
 
   componentDidUpdate(prevProps: EuiCodeEditorProps) {

From edc0566ec23e9af1bb2957489d52306bd3683a24 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Wed, 1 Apr 2020 23:06:43 +0530
Subject: [PATCH 3/3] CL

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b6733031b3f..f02b626e64d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Allow `EuiCodeEditor` to set `readonly` and `id` on `<textarea>` ([#3212](https://github.com/elastic/eui/pull/3212))
 - Fixed `EuiPopover` arrow position in Android and Linux ([#3188](https://github.com/elastic/eui/pull/3188))
 - Improved `htmlIdGenerator` when supplying both `prefix` and `suffix` ([#3076](https://github.com/elastic/eui/pull/3076))
 - Updated pagination prop descriptions for `EuiInMemoryTable` ([#3142](https://github.com/elastic/eui/pull/3142))