Support listeners on gutter children

[pjjanak]

For example the following:

<Split
    columnMinSizes={[500, 20, 350]}
    render={({
        getGridProps,
        getGutterProps,
    }) => (
        <div {...getGridProps()}>
            <div>Column A</div>
            <div {...getGutterProps('column', 1)}>
                <div>Click me</div>
            </div>
            <div>Column B</div>
        </div>
    )
/>

If you click on the child div of the gutter the following error is produced:

split-grid.es.js:209 Uncaught Error: Unable to determine grid template tracks from styles.

It would seem that the ultimate problem is an assumption within the Gutter's startDragging function:

...
if (this.element) {
    this.grid = this.element.parentNode;
} else {
    this.grid = e.target.parentNode;
}
...

Given this code, a gutter cannot have children since the Gutter code will always assume that the parent node of the element being clicked is the grid, where this is not the necessarily always the case. I think if I was ale to set this.element on the Gutter that would probably fix my issue, but I don't see a way to do that with the react library.

That said, it would seem to me that the Gutter code here should continue searching parent nodes until it finds the one that is actually the grid, rather than relying on a strict DOM structure.

[pjjanak]

For anyone else who ends up here trying to add children to their Gutters (and until a proper fix is implemented), if you are targeting more modern browsers you can use css to get this to 'work'. Just add the following rule to any child element of the gutter:

pointer-events: none;

This prevents the child element from receiving any click events and will instead cause any element 'beneath' it in the DOM to trigger the event instead.

[pjjanak]

In addition to the above, if you actually do have a button you want to be interacted with in your Gutter, say a button which collapses one of your columns, you could do something like the following onMouseDown:

...
    <Gutter {...getGutterProps('column', 1)}>
        <HideButton onClick={doBehavior()} onMouseDown={(e) => { e.stopPropagation(); e.preventDefault(); }} />
    </Gutter>
...

react-grid-split's gutter listens on the onMouseDown event. So by capturing it in the child and preventing it from bubbling to its parent we will effectively disallow drag interactions on this button, but also allow the button to behave as expected with the click event. I'm using a combination of pointer-events: none; and this onMosueDown trick to allow me to have an interactive child to the Gutter and a decorative child.

[nathancahill]

Thanks, this is super helpful. I'll improve handling of gutter children since that is a great usecase.