Bug - react-code-editor - resizeObserver resize loop

[jschuler]

Describe the problem I am rendering a simple react-code-editor component. If my browser's zoom level is less than 100%, I seem to get infinite resizeObserver errors thrown with the message: "ResizeObserver loop completed with undelivered notifications."

"@patternfly/react-code-editor": "5.2.0", "monaco-editor": "0.45.0", "react-monaco-editor": "^0.55.0",

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.

It looks like this may have been introduced with this change.

Expected behavior No resize observer error thrown

Is this issue blocking you? Workaround: Keep zoom level at or above 100%.

Screenshots

What is your environment?

• OS: [e.g. iOS]. MacOS
• Browser [e.g. chrome, safari] Chrome
• Version [e.g. 22]

What is your product and what release date are you targeting? OCM

Any other information? With some trial and error, it appears that debouncing the handleResize method in the getResizeObserver function fixes the issue.

// handleResize();
debounce(handleResize, 100);