fix(CodeEditor): prevent focus loss (#12211)

[ochosi]

Problem

When using CodeEditor with isUploadEnabled={true}, typing the first character causes the Monaco editor to lose focus and cursor position.

Solution

Remove && !value from the outer conditional at line 599. The outer branch should only depend on whether upload/emptyState features are enabled, not on current code content. The inner condition already handles empty state display correctly.

I have verified the fix locally by running image-builder-frontend linked against the patched patternfly-react.

What: Closes #12211

Additional issues: https://issues.redhat.com/browse/HMS-9956 (Bug surfacing in Image Builder)

Summary by CodeRabbit

• Style

  • Improved editor container visuals and consistent styling across upload-enabled, empty, loading, and populated states.

• Refactor

  • Unified component layout so the editor always renders within a consistent container and preserves header, main area, and upload handling across states.

• Tests

  • Updated tests to match the adjusted DOM structure and traversal depth.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Render logic in CodeEditor was changed so the upload/dropzone container is always rendered when isUploadEnabled or emptyState is true (removed dependency on !value), and fragment wrappers were replaced with a stable codeEditorContainer div to avoid remounting the editor.

Changes

Cohort / File(s)	Summary
CodeEditor rendering packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx	Outer conditional changed from `(isUploadEnabled
Tests updated for DOM depth packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditor.test.tsx	Assertions updated to traverse one additional .parentElement level to reflect the new container hierarchy; test intent and expectations unchanged.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix(CodeEditor): prevent focus loss' accurately describes the main change: fixing a focus loss issue in the CodeEditor component when typing the first character in an empty editor.
Linked Issues check	✅ Passed	The code changes directly address all objectives from issue #12211: removing the '&& !value' check from the outer conditional prevents React from swapping container subtrees, preserving the Monaco editor instance and focus across empty-to-non-empty transitions.
Out of Scope Changes check	✅ Passed	All changes are directly in scope: the render logic fix in CodeEditor.tsx and test updates in CodeEditor.test.tsx align with the stated objective of preventing focus loss by stabilizing the container structure.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[patternfly-build]

Preview: https://pf-react-pr-12212.surge.sh

A11y report: https://pf-react-pr-12212-a11y.surge.sh