From d5f768bd78e014947e1490bbd9b7156254492f1c Mon Sep 17 00:00:00 2001
From: Simon Steinbeiss <simon.steinbeiss@redhat.com>
Date: Sun, 18 Jan 2026 02:46:00 +0100
Subject: [PATCH 1/2] fix(CodeEditor): prevent focus loss (#12211)

Remove `&& !value` from outer conditional rendering to prevent Monaco
editor from unmounting when code transitions from empty to non-empty.
---
 .../src/components/CodeEditor/CodeEditor.tsx              | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx
index ac1ec9ee242..9649e042810 100644
--- a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx
+++ b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx
@@ -596,7 +596,8 @@ export const CodeEditor = ({
             )}
             ref={ref}
           >
-            {(isUploadEnabled || emptyState) && !value ? (
+            {isUploadEnabled || emptyState ? (
+              /* Upload/EmptyState enabled: wrap in Dropzone container */
               <div
                 {...getRootProps({
                   onClick: (event) => event.stopPropagation() // Prevents clicking TextArea from opening file dialog
@@ -619,7 +620,8 @@ export const CodeEditor = ({
                 </div>
               </div>
             ) : (
-              <>
+              /* No upload/emptyState: use consistent container structure */
+              <div className={css(styles.codeEditorContainer)}>
                 {editorHeader}
                 {showEditor && (
                   <div className={css(styles.codeEditorMain)}>
@@ -627,7 +629,7 @@ export const CodeEditor = ({
                     {editor}
                   </div>
                 )}
-              </>
+              </div>
             )}
           </div>
         );

From f7d8a0a1592f24b0628c405f56411a3a14761d55 Mon Sep 17 00:00:00 2001
From: Simon Steinbeiss <simon.steinbeiss@redhat.com>
Date: Mon, 19 Jan 2026 14:22:25 +0100
Subject: [PATCH 2/2] fix(CodeEditor): Account for focus loss fix

---
 .../CodeEditor/__test__/CodeEditor.test.tsx   |  10 +-
 .../__snapshots__/CodeEditor.test.tsx.snap    | 230 +++++++++---------
 2 files changed, 127 insertions(+), 113 deletions(-)

diff --git a/packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditor.test.tsx b/packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditor.test.tsx
index d6b7d21fe10..1aa6d6bb253 100644
--- a/packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditor.test.tsx
+++ b/packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditor.test.tsx
@@ -17,17 +17,21 @@ test('Matches snapshot with control buttons enabled', () => {
 test(`Renders with default classes ${styles.codeEditor}, ${styles.codeEditorCode}`, () => {
   render(<CodeEditor />);
   expect(screen.getByTestId('mock-editor').parentElement).toHaveClass(styles.codeEditorCode);
-  expect(screen.getByTestId('mock-editor').parentElement?.parentElement?.parentElement).toHaveClass(styles.codeEditor);
+  expect(screen.getByTestId('mock-editor').parentElement?.parentElement?.parentElement?.parentElement).toHaveClass(
+    styles.codeEditor
+  );
 });
 
 test('Renders custom class when className is passed', () => {
   render(<CodeEditor className="custom" />);
-  expect(screen.getByTestId('mock-editor').parentElement?.parentElement?.parentElement).toHaveClass('custom');
+  expect(screen.getByTestId('mock-editor').parentElement?.parentElement?.parentElement?.parentElement).toHaveClass(
+    'custom'
+  );
 });
 
 test(`Renders with ${styles.modifiers.readOnly} when isReadOnly = true`, () => {
   render(<CodeEditor isReadOnly />);
-  expect(screen.getByTestId('mock-editor').parentElement?.parentElement?.parentElement).toHaveClass(
+  expect(screen.getByTestId('mock-editor').parentElement?.parentElement?.parentElement?.parentElement).toHaveClass(
     styles.modifiers.readOnly
   );
 });
diff --git a/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap b/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap
index 80f02fa90b6..40904d4b169 100644
--- a/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap
+++ b/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap
@@ -6,124 +6,130 @@ exports[`Matches snapshot with control buttons enabled 1`] = `
     class="pf-v6-c-code-editor"
   >
     <div
-      class="pf-v6-c-code-editor__header"
+      class="pf-v6-c-code-editor__container"
+      role="presentation"
+      tabindex="0"
     >
       <div
-        class="pf-v6-c-code-editor__header-content"
+        class="pf-v6-c-code-editor__header"
       >
         <div
-          class="pf-v6-c-code-editor__controls"
+          class="pf-v6-c-code-editor__header-content"
         >
           <div
-            style="display: contents;"
+            class="pf-v6-c-code-editor__controls"
           >
-            <button
-              aria-label="Copy code to clipboard"
-              class="pf-v6-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-1"
-              data-ouia-component-type="PF6/Button"
-              data-ouia-safe="true"
-              type="button"
+            <div
+              style="display: contents;"
             >
-              <span
-                class="pf-v6-c-button__icon"
+              <button
+                aria-label="Copy code to clipboard"
+                class="pf-v6-c-button pf-m-plain"
+                data-ouia-component-id="OUIA-Generated-Button-plain-1"
+                data-ouia-component-type="PF6/Button"
+                data-ouia-safe="true"
+                type="button"
               >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v6-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 448 512"
-                  width="1em"
+                <span
+                  class="pf-v6-c-button__icon"
                 >
-                  <path
-                    d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
-                  />
-                </svg>
-              </span>
-            </button>
-          </div>
-          <div
-            style="display: contents;"
-          >
-            <button
-              aria-label="Upload code"
-              class="pf-v6-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-2"
-              data-ouia-component-type="PF6/Button"
-              data-ouia-safe="true"
-              type="button"
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 448 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </div>
+            <div
+              style="display: contents;"
             >
-              <span
-                class="pf-v6-c-button__icon"
+              <button
+                aria-label="Upload code"
+                class="pf-v6-c-button pf-m-plain"
+                data-ouia-component-id="OUIA-Generated-Button-plain-2"
+                data-ouia-component-type="PF6/Button"
+                data-ouia-safe="true"
+                type="button"
               >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v6-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 512 512"
-                  width="1em"
+                <span
+                  class="pf-v6-c-button__icon"
                 >
-                  <path
-                    d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
-                  />
-                </svg>
-              </span>
-            </button>
-          </div>
-          <div
-            style="display: contents;"
-          >
-            <button
-              aria-label="Download code"
-              class="pf-v6-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-3"
-              data-ouia-component-type="PF6/Button"
-              data-ouia-safe="true"
-              type="button"
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 512 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </div>
+            <div
+              style="display: contents;"
             >
-              <span
-                class="pf-v6-c-button__icon"
+              <button
+                aria-label="Download code"
+                class="pf-v6-c-button pf-m-plain"
+                data-ouia-component-id="OUIA-Generated-Button-plain-3"
+                data-ouia-component-type="PF6/Button"
+                data-ouia-safe="true"
+                type="button"
               >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v6-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 512 512"
-                  width="1em"
+                <span
+                  class="pf-v6-c-button__icon"
                 >
-                  <path
-                    d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
-                  />
-                </svg>
-              </span>
-            </button>
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 512 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-    <div
-      class="pf-v6-c-code-editor__main"
-    >
-      <input
-        hidden=""
-        style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
-        tabindex="-1"
-        type="file"
-      />
       <div
-        class="pf-v6-c-code-editor__code"
-        dir="ltr"
-        tabindex="0"
+        class="pf-v6-c-code-editor__main"
       >
-        <div
-          data-testid="mock-editor"
+        <input
+          hidden=""
+          style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+          tabindex="-1"
+          type="file"
         />
+        <div
+          class="pf-v6-c-code-editor__code"
+          dir="ltr"
+          tabindex="0"
+        >
+          <div
+            data-testid="mock-editor"
+          />
+        </div>
       </div>
     </div>
   </div>
@@ -136,25 +142,29 @@ exports[`Matches snapshot without props 1`] = `
     class="pf-v6-c-code-editor"
   >
     <div
-      class="pf-v6-c-code-editor__header"
-    />
-    <div
-      class="pf-v6-c-code-editor__main"
+      class="pf-v6-c-code-editor__container"
     >
-      <input
-        hidden=""
-        style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
-        tabindex="-1"
-        type="file"
+      <div
+        class="pf-v6-c-code-editor__header"
       />
       <div
-        class="pf-v6-c-code-editor__code"
-        dir="ltr"
-        tabindex="0"
+        class="pf-v6-c-code-editor__main"
       >
-        <div
-          data-testid="mock-editor"
+        <input
+          hidden=""
+          style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+          tabindex="-1"
+          type="file"
         />
+        <div
+          class="pf-v6-c-code-editor__code"
+          dir="ltr"
+          tabindex="0"
+        >
+          <div
+            data-testid="mock-editor"
+          />
+        </div>
       </div>
     </div>
   </div>