josdejong/jsoneditor

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

Open

#1 147 ouverte le 23 oct. 2020

Voir sur GitHub
 (2 commentaires) (0 réactions) (0 assignés)JavaScript (2 034 forks)batch import
bughelp wanted

Métriques du dépôt

Stars
 (10 781 stars)
Métriques de merge PR
 (Merge moyen 15h 36m) (3 PRs mergées en 30 j)

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

Guide contributeur