React-grid-layout: draggableHandle example is broken, draggableHandle prop is not passed down within data-grid prop

[birish2]

source here: https://github.com/STRML/react-grid-layout/blob/master/test/examples/5-static-elements.jsx

demo: https://strml.github.io/react-grid-layout/examples/5-static-elements.html

The 4th draggable (the one with the drag handle) item does not render.

[andrerpena]

I came here to ask for an example of an element with a draggable handle, that is, you can't drag the element unless by dragging it by the handle. It seems it's supported but at least the example is broken.

[birish2]

@STRML I was able to run the basic drag handle example from react-draggable and it works. But when I do the exact same thing with react-grid-layout it always starts drag.
I have the examples side by side in a bare bones react app with one component.

Called the below Grid example with just:

import React from 'react';
import Grid from './Grid';

export default class HomePage extends React.Component { 

  render() {
    return (
      <div>
        <Grid  />
      </div>
    );
  }
}

Grid.js:

'use strict';
var React = require('react');
var PureRenderMixin = require('react/lib/ReactComponentWithPureRenderMixin');
var WidthProvider = require('react-grid-layout').WidthProvider;
var ReactGridLayout = require('react-grid-layout');
ReactGridLayout = WidthProvider(ReactGridLayout);
import Draggable from 'react-draggable'


/**
 * This layout demonstrates how to use static grid elements.
 * Static elements are not draggable or resizable, and cannot be moved.
 */
var StaticElementsLayout = React.createClass({
  mixins: [PureRenderMixin],

  render() {
    return (
      <div>
      <ReactGridLayout className="layout" rowHeight={30}>
        <div key="1" data-grid={{x: 0, y: 0, w: 2, h: 3}}><span className="text">1</span></div>
        <div key="2" data-grid={{x: 2, y: 0, w: 4, h: 3, static: true, isResizable: false}}><span className="text">2 - Static</span></div>
        <div key="3" data-grid={{x: 6, y: 0, w: 2, h: 3, isResizable: false}}><span className="text">3</span></div>
        <div key="4" data-grid={{x: 8, y: 0, w: 4, h: 3, draggableHandle: 'strong', isResizable: false}}>
              <strong className="cursor"><div>Drag here</div></strong>
              <div>You must click my handle to drag me</div>
        </div>
        </ReactGridLayout>

            <Draggable handle="strong" >
            <div className="box no-cursor">
              <strong className="cursor"><div>Drag here</div></strong>
              <div>You must click my handle to drag me</div>
            </div>
        </Draggable>
      </div>
    );
  }
});

module.exports = StaticElementsLayout;

[birish2]

Just confirmed that the draggableHandle prop does not get passed down within the data-grid prop. 'handle' is null on those components. I was able to include the prop passed in like so:

      <ReactGridLayout className="layout" onLayoutChange={this.onLayoutChange} rowHeight={30} draggableHandle='.react-grid-dragHandleExample' >
        <div key="1" data-grid={{x: 0, y: 0, w: 2, h: 3}}><span className="text">1</span></div>
        <div key="2" data-grid={{x: 2, y: 0, w: 4, h: 3, static: true}}><span className="text">2 - Static</span></div>
        <div key="3" data-grid={{x: 6, y: 0, w: 2, h: 3}}><span className="text">3</span></div>
        <div key="4" data-grid={{x: 8, y: 0, w: 4, h: 3}} >
          <span className="text">4 - Draggable with Handle
            <hr/><hr/>
            <span className="react-grid-dragHandleExample">[DRAG HERE]</span>
            <hr/><hr/>
          </span>
        </div>
      </ReactGridLayout>

But I don't think that was the intended feature because now all the components are forced to use that handle for dragging.

[birish2]

Sorry, did not mean to close issue. Would like to see draggableHandle prop passed down inside of data-grid prop as implied in the static example (which still does not work).

[JoepHeijnen]

I recently started using the react-grid-layout. I am curious if this issue is getting fixed?

[cbranch101]

Same as above, any word on this?

[jog39]

Any news on this one?

[anze555]

This is not yet fixed as of 0.16.6, however the good news is that workaround by @birish2 (defining draggableHandle as a property on GridLayout directly) works. Thanks for figuring it out!

[DavidHenri008]

I may be wrong but according to the documentation, the draggableHandle property is part of the ReactGridLayout properties and not the item properties.

There is an error on the static example demo...

In order to make it work you have to set the draggableHandle on the ReactGridLayout or on the ResponsiveGridLayout component.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this issue will be closed in 7 days