React-grid-layout: Custom element cannot be resized even with passed props and styles.

[wisniewski94]

Expected behavior

Custom element should be static, draggable, resizable if needed and inherit size from layout.

Actual behavior

Dragging, static and size can be set but resizing not. Handler is not rendering and if hardcoded doesn't do anything. Classes and styles are the same as in working resizable div elements.

Steps to reproduce

Check out this example: https://stackblitz.com/edit/react-uvpsqf. For some unknown reason resize doesn't work by default on other components too but that's not the case. Below you can find my code where divs can be resized and custom not:

import React, { Component } from "react";
import { Responsive, WidthProvider } from "react-grid-layout";
import "../../node_modules/react-grid-layout/css/styles.css";
import "../../node_modules/react-resizable/css/styles.css";
import MainTab from "./mainTab";

const ResponsiveGridLayout = WidthProvider(Responsive);

class Homepage extends Component {
  state = {};
  render() {
    var layouts = {
      lg: [
        { i: "a", x: 0, y: 0, w: 12, h: 4, static: false, isResizable: true },
        { i: "b", x: 0, y: 4, w: 4, h: 4, static: false },
        { i: "c", x: 4, y: 4, w: 4, h: 4, static: false },
        { i: "d", x: 8, y: 4, w: 4, h: 8, static: false },
        { i: "e", x: 0, y: 8, w: 8, h: 4, static: false }
      ]
    };
    return (
      <ResponsiveGridLayout
        className="layout"
        layouts={layouts}
        cols={{ lg: 12, md: 12, sm: 6, xs: 4, xxs: 2 }}
        breakpoints={{ lg: 1200 }}
        rowHeight={100}
      >
        <MainTab key="a" />
        <div key="b" className="tab">
          b
        </div>
        <div key="c" className="tab">
          c
        </div>
        <div key="d" className="tab">
          d
        </div>
        <div key="e" className="tab">
          e
        </div>
      </ResponsiveGridLayout>
    );
  }
}

export default Homepage;

import React, { Component } from "react";

class MainTab extends Component {
  state = {};
  render() {
    return (
      <div {...this.props} className={`${this.props.className} tab`}>
        Hello
        <span
          className="react-resizable-handle react-resizable-handle-se"
          style={{ ["touch-action"]: "none" }}
        />
      </div>
    );
  }
}

export default MainTab;

[n1ghtmare]

You need to also pass {this.props.children} in your custom element. [Here] is your example working (https://stackblitz.com/edit/react-rsu7nu?file=style.css)

So in your example, the code would look like:

class MainTab extends Component {
  state = {};
  render() {
    return (
      <div {...this.props} className={`${this.props.className} tab`}>
        Hello
        {this.props.children}
      </div>
    );
  }
}

When I get some free time I'll try to update the documentation a bit, because I see this as a common question.