Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ochosi wants to merge 2 commits into
base: main
Choose a base branch
from
+132 −116
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d5f768b
fix(CodeEditor): prevent focus loss (#12211)
ochosi Jan 18, 2026
f7d8a0a
fix(CodeEditor): Account for focus loss fix
ochosi Jan 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -619,15 +620,16 @@ export const CodeEditor = ({
</div>
</div>
) : (
<>
/* No upload/emptyState: use consistent container structure */
<div className={css(styles.codeEditorContainer)}>
{editorHeader}
{showEditor && (
<div className={css(styles.codeEditorMain)}>
{hiddenFileInput}
{editor}
</div>
)}
</>
</div>
)}
</div>
);
Expand Down
10 changes: 7 additions & 3 deletions packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditor.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
);
});
Expand Down
230 changes: 120 additions & 110 deletions ...act-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
Loading