josdejong/jsoneditor

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

Open

#1147 aperta il 23 ott 2020

Vedi su GitHub
 (2 commenti) (0 reazioni) (0 assegnatari)JavaScript (2034 fork)batch import
bughelp wanted

Metriche repository

Star
 (10.781 star)
Metriche merge PR
 (Merge medio 15h 36m) (3 PR mergiate in 30 g)

Descrizione

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

Guida contributor