Error tooltip position offset when editor inside container with css `contain: layout;`

[cge]

This seems like an edge case, but I'm using a huge third-party component utilising css like contain: layout; or contain: content; and need to embed the editor inside one of these containers. When I do so tooltips either disappear (are hidden) or are positioned with undesired offsets.

Here is a small example:

1. Create a new TS CRA project with npx create-react-app je_test --template typescript
2. Create the Page component and associated files, as detailed below and use <Page/> inside App.
3. In the editor, make a syntax mistake and mouse-over the error icon in the left bar.
4. Notice the tooltip offset (which appears offset from the desired position)

index.css

.page {
  background: orange;
  display: flex;
  height: 100%;
}

.section--menu {
  width: 260px;
  background-color: #fafafa;
  display: flex;
  flex-direction: column;
}

.section--info {
  display: flex;
  background: blue;
  width: calc(100% - 260px);
  contain: layout;
}

.section--live {
  background: green;
}

Page.tsx

import React from "react";
import JsonEditorReact from "./JsonEditorReact";
import "./index.css";

const json = {
  name: "Felix",
  status: "available",
  petType: "cat",
  huntingSkill: "adventurous",
};

const testStr = JSON.stringify(json, null, 2);

class Page extends React.Component {
  render() {
    return (
      <div className="page">
        <div className="section--menu"></div>
        <div className="section--info">
          <div className="section--live">
            <JsonEditorReact text={testStr} />
          </div>
        </div>
      </div>
    );
  }
}

export default Page;

JsonEditorReact.tsx

import * as React from "react";
import JSONEditor from "jsoneditor";
import "jsoneditor/dist/jsoneditor.css";

interface Editor extends Object {
  setText: (text?: string) => void;
}

export default class JsonEditorReact extends React.Component<{ text: string }> {
  container: HTMLDivElement | null = null;
  componentDidMount() {
    const editor: Editor = new JSONEditor(this.container, { mode: "code" });
    editor.setText(this.props.text);
  }
  render() {
    return <div ref={(elem) => (this.container = elem)} />;
  }
}

[cge]

The problem can be seen in both Firefox (81.0) and Chrome (86.0.4240.111), while it seems to work fine in Edge (42.17134.1098.0).

[josdejong]

Thanks for reporting @cge.

Looks like an issue in Ace editor (https://ace.c9.io/), which is used for code mode. Would be good to see whether this issue indeed occurs having "just" an Ace editor in a flex box like in your example.

If the issue indeed originates in Ace editor, it would be great if it would be fixed there. If there is a workaround we can apply inside JSONEditor to make it robust against this that would be nice of course.

Help would be very welcome, anyone able to look into this?