React-grid-layout: onLayoutChange ignored if set in defaultProps and passed in props.

[Arcanum417]

Please mark the type of this issue:

• [x] Bug
• [ ] Feature Request
• [ ] Question

The one passed from props is only called once, then the empty dummy function from defaultProps is called. Even demos does not work. For example the local storage one is the most obvious.

[Francismb]

I to have come across this with the ResponsiveGridLayout. the onLayoutChange function is only called when the component is mounted. A good example of this is this.

https://strml.github.io/react-grid-layout/examples/8-localstorage-responsive.html

If you change the layout and then refresh, it is not saved to local storage.

[KevinJunJun]

yeah, i have the same problem, the onLayoutChange function is only called when the component is mounted.

[dmitriyK1]

I also encountered this bug, onLayoutChange only fired once for some reason

[Arcanum417]

Workaround is not to use defaultProps at all, just set everything with props

[rogueturnip]

I have no default props and it is still only calling on resize of window and move/drag of items.

[Francismb]

@rogueturnip It seems this bug is from one of the more recent releases, 0.16.1+.

[oyshan]

Same here. onLayoutChange is not firing after resizing and dragging
Happened after upgrading from 0.16.0 to 0.16.1 for me, I believe

[alexanderzobnin]

This happens due to oldLayout change after moveElement() inside onDrag() function.
https://github.com/STRML/react-grid-layout/blob/master/lib/ReactGridLayout.jsx#L364

moveElement(layout, l, ...) changes props of l element, which is a part of layout array. But both state.oldLayout and state.layout refer to the same object:
https://github.com/STRML/react-grid-layout/blob/master/lib/ReactGridLayout.jsx#L325
https://github.com/STRML/react-grid-layout/blob/master/lib/ReactGridLayout.jsx#L331

So both arrays will be changed and oldLayout always be equal to newLayout. This is a reason why onLayoutChange never happens after the dragging.

if (!isEqual(oldLayout, newLayout)) {
  this.props.onLayoutChange(newLayout);
}

[HyczZhu]

I noticed that the compact function in utils.js no longer clones the layout items at 0.16.1, which makes the references of the layout items never change.
When layout is changed, all the changes are applied the same layout item object in state.oldLayout, which makes the oldLayout is always the same as newlayout, and the onLayoutChange will not be triggered.

see:
https://github.com/STRML/react-grid-layout/blob/0.16.0/lib/utils.js#L108
https://github.com/STRML/react-grid-layout/blob/0.16.1/lib/utils.js#L109

[alexanderzobnin]

@HyczZhu yes, seems that's a reason for this bug.

[hscottharrison]

Was this fixed in 0.16.2? I saw another thread talking about this same issue before the newest release, but I believe I am still running into this issue.

[STRML]

Yes, this is fixed in 0.16.2.