patternfly-react icon indicating copy to clipboard operation
patternfly-react copied to clipboard

fix(CodeEditor) resizeObserver resize loop

Open Dominik-Petrik opened this issue 8 months ago • 1 comments

What: Closes #10087

Fix is simple enough, but I struggled to reliably reproduce the bug. Please try to reproduce it and validate the fix.

How do you reproduce the problem?

  • Run react application in webpack with dev error overlay enabled.

  • Render:

import React from 'react';
import { CodeEditor, Language } from '@patternfly/react-code-editor';
import { editor } from 'monaco-editor/esm/vs/editor/editor.api';

export const ValuesCodeEditor = ({ code }: { code: string }) => {
  const onEditorDidMount = (editor: editor.IStandaloneCodeEditor) => {
    editor.layout();
    editor.focus();
  };

  return (
    <CodeEditor
      isLineNumbersVisible={false}
      isReadOnly
      code={code}
      language={Language.json}
      onEditorDidMount={onEditorDidMount}
      height="400px"
    />
  );
};
  • Reduce your browser's zoom level to 90%.

  • Observe the errors thrown.

Dominik-Petrik avatar Jun 24 '24 14:06 Dominik-Petrik