josdejong/jsoneditor

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

Open

#1,147 opened on Oct 23, 2020

View on GitHub
 (2 comments) (0 reactions) (0 assignees)JavaScript (10,781 stars) (2,034 forks)batch import
bughelp wanted

Description

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)} />;
  }
}

Contributor guide